structural selectors

Explanation: These CSS selectors (structural) allow you to style elements which match a given condition. Keep in mind that specificity may have an effect on the declarations. However, one can significantly reduce the number of classes one typically codes by employing these.

Some of the selectors on can  employ include: : root (for the <html> element itself), : first-child, : last-child, : first-of-type, : last-of-type, : only-child, and : only-of-type.

Example CSS code:

Note that wildcards (the asterisk *) can be used to denote all elements in the document.

/* CSS-3 specific styles*/
*:first-child {
color:#F00;
}

p:first-child {
background-color:#2c566a;
}

Examine the linked document below and identify why certain rules apply.

Example page (view the source code): http://learning-html5.info/CSS3/CSS3_StructuralSelector.html (should work in most modern browsers).

References:

  • lynda.com tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *