CSS Selectors

I revisited the CSS selector knowledge in the MDN documentation and recorded it as a note.

The so-called CSS selector is used to select specified element nodes in the HTML document, which can be used to set style in CSS files or select element nodes in some libraries (such as web crawlers).

Use in CSS Rules

In the CSS file, the selector is usually at the beginning of the Rules. Each Rules can specify a single selector or specify a selectors list, the latter is separated by commas (,)

CSS Selector Types

• Type selectors: Select elements based on the tagname.
• Universal selectors: Use * to match all elements.
  • Can enhance the readability of pseudo-class selectors: div *:first-child instead of div :first-child.
• Class selectors: Use .classname to select corresponding elements.
  • Can be combined with other selectors such as span.highlight.
  • Can select elements that contain multiple classes at the same time .class1.class2.
• ID selectors: Use #id to select corresponding elements.
• Attribute selectors: Select elements based on the attributes of the element.
  • [attr]: The element includes the attr attribute.
  • [attr='val']: The attr attribute value of the element is val.
  • [attr~='val']: The attr attribute of the element is val or the list of this attribute contains val (such as attr='val val1').
  • [attr|='val']: The attr attribute of the element is val or the attribute starts with val- (such as attr='val-val1').
  • [attr^='val']: The attribute starts with val.
  • [attr$='val']: The attribute ends with val.
  • [attr*='val']: The attribute contains val.
  • To negate, you need pseudo-class selectors :not([attr]).
  • Adding i at the end can make the match case insensitive.
• pseudo-class: Pseudo-class selectors, use :pseudo-class-name to select elements in specific states.
  • Select specific order: first-child, last-child, first-of-type, nth-child(n or an+b).
  • Select specific status: checked, disabled, visited.
  • For action: hover, focus.
• pseudo-element: Pseudo-element selectors, use ::pseudo-element to select.
  • The difference from pseudo-classes is that pseudo-elements will add HTML fragments to the selected elements, while pseudo-classes will only modify in the original elements.
  • Select specific location: first-line.
  • Generate specific content: before, after and then set through the content property.

CSS Combinators

• Descendant: The latter element has the former element as an ancestor.
• Child: > The latter is a direct child of the former.
• Adjacent sibling: + The latter follows the former and is from the same parent element.
• General sibling: ~ The latter appears after the former and is from the same parent element.

CSS Selector Priority

If multiple CSS Rules select the same element node and the declared CSS styles conflict, they will be processed according to priority first. When the priorities are the same, the later declared rule is selected.

The priority can be represented by a four-digit number, and one is added to the corresponding bit for each selector that appears

0. inline style: The priority of inline css style is the highest, directly add one to the thousands place.
1. Hundreds place: ID Selector.
2. Tens place: Class selector, attribute selector, pseudo-class selector.
3. Ones place: type selector, pseudo-element selector.