CSS Selectors and Combinators

• CSS offers various types of selectors to target HTML elements for styling.

Descendant Selectors

• Descendant selectors match all elements that are descendants of a specified element.
• The syntax in CSS div span {}
• Syntax in general #selector1 .selector2 {}
• To avoid performance problems aim to not nest CSS more than four levels
• Descendant selectors are overly specific and difficult to override

CSS Combinators

• CSS combinators explain the relationship between selectors.
• The descendant selector utilizes a 'space' as a combinator.
• The child selector utilizes the (>) symbol as a combinator.
• The adjacent sibling selector utilizes the (+) symbol as a combinator.
• The general sibling selector utilizes the (~) symbol as a combinator.

Descendant Selector details

• Matches all elements that are descendants of a selector.
• The syntax is parent child {}
• Use div span {} in CSS

Child Selector details

• Selects all direct children of a parent element
• The syntax is parent > child {}
• Use div > span {} in CSS

Adjacent Sibling Selector details

• Selects the first element directly after a specified element.
• The syntax is former_element + target_element {}
• Use div + span {} in CSS

General Sibling Selector details

• Selects all elements after a specified element.
• The syntax is former_element ~ target_element {}
• Use div ~ span {} in CSS

Pseudo-class Selectors

• Pseudo-class selectors allow to select elements based on a certain state.
• A pseudo class example is to style an element when a user mouses over it.
• A pseudo class example is to style visited and unvisited links differently.
• A pseudo class example is to style an element when it gets focus.
• Syntax is selector: pseudo-class { property: value; }
• 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.

Tips for Working with CSS and HTML

• Use meaningful class and ID names.
• Use a consistent HTML structure.
• Structure first, design second.
• It is often hard to decide when to use a class versus an id for an element.
• Use a class tag if the style is used in various places throughout the document or the style is very general.
• Use an id tag if the style is only used once ever in the document, is specific to a certain area of the document, and cannot appear more than once in any HTML document.