CSS Selectors

CSS Selectors

Types of Selectors

• Simple Selectors:
  • * - Universal selector (matches all elements)
  • E - Element selector (e.g., div, p, span)
  • .class - Class selector (e.g., .header, .footer)
  • #id - ID selector (e.g., #header, #footer)
• Combinators:
  • E F - Descendant combinator (e.g., div p, body .header)
  • E > F - Child combinator (e.g., div > p, body > .header)
  • E + F - Adjacent sibling combinator (e.g., h2 + p, li + li)
  • E ~ F - General sibling combinator (e.g., h2 ~ p, li ~ li)
• Pseudo-classes:
  • :link - Unvisited link
  • :visited - Visited link
  • :hover - Mouse over element
  • :active - Element being clicked
  • :focus - Element with focus
  • :first-child - First child element
  • :last-child - Last child element
  • :nth-child(n) - nth child element
• Pseudo-elements:
  • ::before - Insert content before element
  • ::after - Insert content after element
  • ::first-letter - First letter of element
  • ::first-line - First line of element

Selector Combinations

• Chaining:
  • Combine multiple selectors (e.g., div.header, .header .logo)
• Grouping:
  • Combine multiple selectors with commas (e.g., div, p, span, .header, .footer)
• Negation:
  • :not() - Negate a selector (e.g., :not(div), :not(.header))

Selector Specificity

• Inline styles: 1000 points
• IDs: 100 points
• Classes, pseudo-classes, and attributes: 10 points
• Elements and pseudo-elements: 1 point

CSS Selectors

Types of Selectors

• Universal Selector: * matches all elements
• Element Selector: E selects elements based on their name (e.g., div, p, span)
• Class Selector: .class selects elements based on their class name (e.g., .header, .footer)
• ID Selector: #id selects elements based on their ID (e.g., #header, #footer)
• Descendant Combinator: E F selects elements that are descendants of another element (e.g., div p, body.header)
• Child Combinator: E > F selects elements that are direct children of another element (e.g., div > p, body > .header)
• Adjacent Sibling Combinator: E + F selects elements that are immediately preceded by another element (e.g., h2 + p, li + li)
• General Sibling Combinator: E ~ F selects elements that are preceded by another element (e.g., h2 ~ p, li ~ li)
• Pseudo-classes: used to select elements based on their state or position
  • :link selects unvisited links
  • :visited selects visited links
  • :hover selects elements when the mouse is over them
  • :active selects elements when they are being clicked
  • :focus selects elements when they have focus
  • :first-child selects the first child element
  • :last-child selects the last child element
  • :nth-child(n) selects the nth child element
• Pseudo-elements: used to select and style parts of elements
  • ::before inserts content before an element
  • ::after inserts content after an element
  • ::first-letter selects the first letter of an element
  • ::first-line selects the first line of an element

Selector Combinations

• Chaining: combining multiple selectors to select a specific element (e.g., div.header, .header.logo)
• Grouping: combining multiple selectors with commas to select multiple elements at once (e.g., div, p, span, .header, .footer)
• Negation: using the :not() pseudo-class to negate a selector (e.g., :not(div), :not(.header))

Selector Specificity

• Inline styles: have a specificity of 1000 points
• IDs: have a specificity of 100 points
• Classes, pseudo-classes, and attributes: have a specificity of 10 points
• Elements and pseudo-elements: have a specificity of 1 point

Quiz about types of CSS selectors, including simple selectors and combinators. Learn about universal, element, class, and ID selectors, as well as descendant, child, and adjacent sibling combinators.