Jump to content
shad

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

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:

Share this post


Link to post
Share on other sites

(1) No! The values inside

#customes{}

ll be only be assigned to

<table id="customers">

while

#customer td,#customer th{properties...}

will be assigned to any

<td>

and

<th>

tags, that is inside the

<table id="customers">

Edited by eTianbun

Share this post


Link to post
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">

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

(3)

#customers tr.alt td{}

Means: assign the properties, to any <td> tag, that is a child of a <tr> with class="alt" , and the <tr> tag, is also a child of an element (e.g: <table>) with id="customers".

Edited by eTianbun
  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...