Selectors

selector - is used to match specific HTML element and apply CSS rules on it

  • e.g. a.active - select a link which has class active


, - comma is used to provide selector list. element should match at least one selector to get the styles. this avoids repetition

* - any element

CSS nesting - special syntax, which allows to declare styles for descendants right inside parent rules block

.button {
  border: 1px solid pink;

  > .svg {
    color: pink;
  }
}

& - nesting selector. it is used to reference upper selector, when nesting is used

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
  • tricks: div + div - match all <div>s except first one. can be useful when adding borders-separators in a list


~ - general sibling combinator

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

Pseudo-classes

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

  • <number> - any concrete child
  • 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

:nth-last-child()

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

  • accepts same arguments as nth-child()
  • tricks:
  • :has(button:nth-of-type(2)) - can be used as opposite to :only-child, to trigger element which contains more than one button

:nth-last-of-type()

:only-child - matches element, when it is the only child of its parent
:only-of-type - matches element, if it is the only one with this tag

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

:root - matches the root element of a document tree

  • is often used for declaring global CSS variables. e.g. :root { --body: 255, 255, 255; }

Accepting Selector

: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() - 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
  • .button:has(+ .error) - match <button> followed by an error. this is a reverse to sibling combinator
  • hints: it is allowed to set multiple comma-separated selectors


:is() - accepts selector list and will assign rules if at least one selector matches element

  • specificity of :is equals to the most specific selector from arguments
  • it is introduced in order to make complicated selectors more readable
  • e.g.
  • :is(button, a, .link) svg - shorter than button svg, a svg, .link svg
  • &:is(.rounded &) - rounded is set on <table> and set of inner elements need to slightly adjust styles. :is allows not to get out from nesting


:where() - same as :is, but always has 0 specificity

: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