CSS ID selectors

vbboyd · January 10th, 2012, 07:50 PM

I was reviewing your book on CSS. I was wondering when it comes to ID selectors like:
#hero
{
width 78%;
margin: 5px auto;
}

and

#hero p
{
padding-right: 0;
padding-left: 10px;
}

and then.....

#hero nav
{
width 396px;
height 75px;
}

They both look same but different. How are they alike and how are they different?

Imar · January 11th, 2012, 10:43 AM

The last two are similar, because they both refer to an element *within* an element with an id of hero. They are different because they refer to different type of elements. In the first case, it refers to a paragraph (p); in the second case to a (non-existent) element called nav.

Hope this helps,

Imar

vbboyd · January 11th, 2012, 11:13 AM

Quote:

Originally Posted by Imar

The last two are similar, because they both refer to an element *within* an element with an id of hero. They are different because they refer to different type of elements. In the first case, it refers to a paragraph (p); in the second case to a (non-existent) element called nav.

Hope this helps,

Imar

Yes the documentation that I am reading, if I am not mistaken I believe, the #hero and # hero p id selectors are being referred to as style rules. Is that the same as id selectors?

Thank you

Imar · January 11th, 2012, 01:03 PM

Hi there,

Take a look at Page 71 for a full description of CSS terminology.

Cheers,

Imar