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
Loading ...