Selectors

selector - is used to target specific HTML element

  • e.g. a.active - select a link which has class "active"
  • , - comma can be used to list several selectors and apply same rules
  • * - any element

Combinators

<space> - descendant combinator. matches a descendant

> - child combinator. matches a child

  • child vs descendant - child is exact descendant


+ - adjacent sibling combinator

  • e.g. .foo + .bar - matches bar, which follows immediately after foo


~ - general sibling combinator

  • e.g. h2 ~ ul - matches all <ul>, which follow after <h2>

Pseudo-classes

:first-child
:last-child
:nth-child()

  • <number> - 1 or 2 or 3, etc.
  • odd - 1, 3, 5, etc.
  • even - 2, 4, 6, etc.
  • n+2 - 2, 3, 4, etc.
  • -n+3 - 1, 2, 3
  • 4n - 4, 8, 12, etc.
  • 3n+4 - 4, 7, 10, etc.
  • several nth-child can be combined if needed. e.g. match group in the middle


:first-of-type - compares only among same tag elements
:last-of-type
:nth-of-type()

  • accepts same arguments as nth-child


:not(selector) - match all except

  • :not(button, input) - multiple comma-separated selectors are possible
  • tricks:
  • p:not(:hover) - matches all <p>, which are not hovered


:has(selector) - match a parent based on its descendant(s) or sibling

  • e.g.
  • div:has(button:hover) - match div which contains button, which is currently hovered
  • h1:has(+ h2) - match h1 followed by h2
  • multiple comma-separated selectors are possible


:empty - matches an element that has no children and text content

:root - matches the root element of a document tree

  • e.g. :root { border: 3px; } - root equals html element
  • can be used for declaring global CSS variables

:link - unvisited link
:visited - visited link
:hover - when mouse is over link

  • "hover" must have higher specificity than "link" and "visited" to be effective
  • it is widely used for all elements, not only link

:active - selected link. i.e. when pointer is down

  • "active" must have higher specificity then "hover" to be effective

:focus - for inputs which can be focused
:focus-within - matches element in two cases: it is focused or any of its descendants is focused

:checked - for checkboxes and radiobuttons

:invalid - matches input or form element which doesn't pass validation
:valid

:disabled
:enabled

:required
:optional

Pseudo-elements

::before - add content before selected element
::after - add content after selected element

  • content - content CSS rule is mandatory to set
  • content: "" - in many cases before & after are used to add some styles to element. in such cases content can be set to empty string
  • before & after can't be used for empty elements, which are: img, input, select
  • tricks:
  • .block:hover::after - hover + after


::first-line

::selection - matches selected area of text

::placeholder - for inputs

Attribute Selectors

p[foo] - <p> which has foo attribute

p[foo="bar"] - <p> whose foo attribute value is exactly equal to bar

p[foo*="bar"] - <p> whose foo attribute value contains the substring bar

p[foo^="bar"] - <p> whose foo attribute value begins exactly with the string bar

p[foo$="bar"] - <p> whose foo attribute value ends exactly with the string bar

p[foo~="bar"] - <p> whose foo attribute value is a space-separated list of values, one of which is equal to bar

p[foo|="bar"] - <p> whose foo attribute value begins with bar, separated from another part with hyphen

  • is mostly used for languages