html - element with class not taking its class CSS properties -
html - <a> element with class not taking its class CSS properties -
why elements classes not taking respective class (.1stbtn , .2ndbtn) css properties in next example:
html:
<div class="herocontent"> <a class="1stbtn" href="classes.html">button 1</a> <a class="2ndbtn" href="http://eepurl.com/vsodx">button 2</a> </div>
css:
.herocontent { display: inline-block; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-size: 16px; font-weight: bold; padding: 14px 20px; border: 1px solid red; } .1stbtn { background-color: green; color: black; margin-right: 10px; } .2ndbtn { background: none; border: 1px solid #fff; color: #fff; } .herocontent a:hover { background-color: black; color: white !important; text-decoration: none; }
in jsfiddle: http://jsfiddle.net/tej5esho/3/
just clear, i'd expect buttons' text color white , .1stbtn background color show green.
i've tried target classes with, e.g.:
.1stbtn
a.1stbtn
.herocontent a.1stbtn
none of above working.
many help.
as emmanuel mentioned, class names cannot start numbers.the rules are: naming rules:
must begin letter a-z or a-z can followed by: letters (a-za-z), digits (0-9), hyphens ("-"), , underscores ("_") in html, values case-insensitive html css
Comments
Post a Comment