Jump to content

css "class" and "id" seems confusing....?


shad
 Share

Recommended Posts

<html><head><style type="text/css">#customers{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;width:100%;border-collapse:collapse;}#customers td, #customers th{font-size:1em;border:1px solid #98bf21;padding:3px 7px 2px 7px;}#customers th{font-size:1.1em;text-align:left;padding-top:5px;padding-bottom:4px;background-color:#A7C942;color:#ffffff;}#customers tr.alt td{color:#000000;background-color:#EAF2D3;}</style></head><body><table id="customers"><tr>  <th>Company</th>  <th>Contact</th>  <th>Country</th></tr><tr><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Germany</td></tr><tr class="alt"><td>Berglunds snabbköp</td><td>Christina Berglund</td><td>Sweden</td></tr><tr><td>Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Mexico</td></tr><tr class="alt"><td>Ernst Handel</td><td>Roland Mendel</td><td>Austria</td></tr><tr><td>Island Trading</td><td>Helen Bennett</td><td>UK</td></tr><tr class="alt"><td>Königlich Essen</td><td>Philip Cramer</td><td>Germany</td></tr><tr><td>Laughing Bacchus Winecellars</td><td>Yoshi Tannamuri</td><td>Canada</td></tr><tr class="alt"><td>Magazzini Alimentari Riuniti</td><td>Giovanni Rovelli</td><td>Italy</td></tr><tr><td>North/South</td><td>Simon Crowther</td><td>UK</td></tr><tr class="alt"><td>Paris spécialités</td><td>Marie Bertrand</td><td>France</td></tr></table></body></html>

nowConfusion 1) <table id="customers"> will the id=customers inherit the properties of all the above #customers defined in the style. Confusion 2)I referred the class and id selector tutorial for css here http://www.w3schools.com/css/css_id_class.asp and also referred the above example code there seems some contradiction between tutorial and example(taken from http://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy) The Contradiction which I feel is when we use id selector we give(eg:- #customers) we don't any extra text but in the above example (#customers td, #customers th) and moreover (#customers tr.alt td) but in the tutorials there are no details given regarding that we can use class and id can be used in same line confusion 3) (#customers tr.alt td) this line of text in the above example seems alien?I would be very much thankful if someone can take the pain to clarify my confusion? :rolleyes:

Link to comment
Share on other sites

(2) You are not adding extra text to the id selector!Just learn about selectors, and you ll understand how it works.

#customers td,#custormers th{}

Means: assign the properties in between {and} to any <td> that is inside the <table> (a child of the <table>) with id="Customers" and also assign the same properties, to any <th>, that is also a child of

<table id="customers">

Link to comment
Share on other sites

#customers = the parent element meaning everything within in it from <table> to </table> will adopt the style applied here, #customers td, #customers th = will be applied to all td and th element, overwriting any identical styling set from above. #customers th = will be applied to all th element, overwriting any identical styling set from above. #customers tr.alt td = will target a td element whose parent tr element (tr parent element of td, table parent element of th, tr, td etc) has class name 'alt' overwriting any identical styling set from above.

Edited by dsonesuk
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...