CSS Selectors Flashcards

CSS Selectors

• Patterns used to select elements for styling.

CSS Combinator

• Describes the relationship between selectors.

CSS Pseudo-class

• Defines a special state of an element.
• Examples include styling elements on mouse over, differentiating between visited and unvisited links, and styling focused elements.

CSS Pseudo-element

• Styles specific parts of an element.
• Can style the first letter or line of an element and insert content before or after an element's content.

Type Selector

• Selects elements matching the specified node name.
• Syntax: eltname
• Example: input matches any <input> element.

Class Selector

• Selects elements with a given class attribute.
• Syntax: .classname
• Example: .index matches elements with class "index".

ID Selector

• Selects elements based on their ID attribute.
• Each ID should be unique within a document.
• Syntax: #idname
• Example: #toc matches the element with ID "toc".

Universal Selector

• Selects all elements in the document.
• Syntax options: *, ns|*, *|*
• Example: * matches all elements.

Attribute Selector

• Selects elements based on attribute values.
• Syntax variations include:
  • [attr]
  • [attr=value]
  • [attr~=value]
  • [attr|=value]
  • [attr^=value]
  • [attr$=value]
  • [attr*=value]
• Example: [autoplay] matches all elements with the "autoplay" attribute.

Combinators

• Four types of combinators defining element relationships:
  • Adjacent sibling combinator (+): Matches the second element immediately following the first.
  • General sibling combinator (~): Matches the second element following the first, not necessarily immediately.
  • Child combinator (>): Matches elements that are direct children of the first selector.
  • Descendant combinator ' ': Matches elements that are descendants of the first selector.

Selector Examples

• element, element: Selects all specified elements, e.g., div, p selects all <div> and <p> elements.

• element element: Selects elements inside specified elements, e.g., div p selects all <p> inside <div>.

• element > element: Selects elements that are direct children, e.g., div > p targets <p> within <div>.

• element + element: Selects elements immediately following another, e.g., div + p selects <p> right after <div>.

• element1 ~ element2: Selects elements preceded by a specified element, e.g., p ~ ul targets all <ul> after a <p>.

Attribute Selector Variations

• Seven types of attribute selectors specify how elements can be selected based on attributes:

  • [attribute]: Selects elements with that attribute.
  • [attribute=value]: Selects elements with a specific attribute value.
  • [attribute~=value]: Selects elements with an attribute containing a specific word.
  • [attribute|=value]: Selects elements with an attribute starting with a specified value.
  • [attribute^=value]: Selects elements with attributes starting with specific characters.
  • [attribute$=value]: Selects elements with attributes ending with specific characters.
  • [attribute*=value]: Selects elements with attributes containing specific characters.

• Example: [target] matches all elements with a "target" attribute.

• Example: [target="_blank"] matches all elements with target="_blank".

• Example: [title~= "flower"] matches elements with the title attribute containing "flower".