Summary

This guide explains different types of CSS selectors, including descendant, child, and adjacent sibling selectors. It also covers pseudo-class selectors and provides tips for writing efficient CSS for web design.

Full Transcript

-Other Types of CSS Selectors - Example Descendant Selector What are CSS Combinators? Pseudo-class selectors Select elements based on a certain state For example, it can be used to: Style an element when a user mouses over it Style visited and unvisited links differently Style an...

-Other Types of CSS Selectors - Example Descendant Selector What are CSS Combinators? Pseudo-class selectors Select elements based on a certain state For example, it can be used to: Style an element when a user mouses over it Style visited and unvisited links differently Style an element when it gets focus Examples: Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive. It is often hard to decide when to use a class versus an id for an element. Here is an easy way to think of the difference: The style is used in various places throughout the document. The style is very general. Use an id tag if: The style is only used once ever in the document. The style is specific to a certain area of the document. Remember that an id can only appear once in any HTML document. Once you've used the id, it should not be used again on that page.