html - Combine css selectors with class not working -
hey guys think know rules how combine css selectors.
but isnt working.
i have css:
table,td { border : 1px solid #ccc; border-collapse : collapse; font : small/1.5 "tahoma", "bitstream vera sans", verdana, helvetica, sans-serif; } table { border :none; border :1px solid #ccc; } thead th, tbody th { background : #fafafb; color : #666; padding : 5px 10px; border-left : 1px solid #ccc; border-bottom : 1px solid #ccc; } tbody th { background : #fafafb; border-top : 1px solid #ccc; text-align : left; font-weight : normal; } #middletable { background : #fafafb; border-top : 1px solid #ccc; text-align : center; font-weight : normal; } tbody tr td { padding : 5px 10px; color : #666; }
i want specify it, rules working in 1 class.
so put class "greytable" table tag
<table class="greytable"></table>
after tryed put selector css this:
table.greytable, .greytable td { border : 1px solid #ccc; border-collapse : collapse; font : small/1.5 "tahoma", "bitstream vera sans", verdana, helvetica, sans-serif; } table.greytable { border :none; border :1px solid #ccc; } .greytable thead th, .greytable tbody th { background : #fafafb; color : #666; padding : 5px 10px; border-left : 1px solid #ccc; border-bottom : 1px solid #ccc; } .greytable tbody th { background : #fafafb; border-top : 1px solid #ccc; text-align : left; font-weight : normal; } #middletable { background : #fafafb; border-top : 1px solid #ccc; text-align : center; font-weight : normal; } .greytable tbody tr td { padding : 5px 10px; color : #666; }
but isnt working. can show me wrong , how work?
here fiddle: http://jsfiddle.net/hyabq/
ok, pretty basic stuff. have created example you.
in simple demo have 2 tables, want style first one. give class
or id
, using give table styles. same else really, table has class test
don't need try , table again e.g: .test table
selecting it.
from first table class test
styled, whereas second not touched due not having class test
.
have @ fiddle , play around it, hope helps.
html:
only 1 affected <table class="test"> <tr> <th>test</th> <th>test</th> <th>test</th> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> table not <table> <tr> <td></td> <td></td> <td></td> </tr> </table>
css:
.test th { width: 100px; border: 1px solid; font-size: 10px; } .test td { border: 1px solid; height: 100px; }
Comments
Post a Comment