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

Popular posts from this blog

formatting - SAS SQL Datepart function returning odd values -

c++ - Apple Mach-O Linker Error(Duplicate Symbols For Architecture armv7) -

php - Yii 2: Unable to find a class into the extension 'yii2-admin' -