Philipp Tuchardt / CSS :is() and :where()

Created Tue, 16 Mar 2021 13:15:07 +0000
101 Words
css

Pseudoclasses I should use more:

/* Selects any paragraph inside a header, main
or footer element that is being hovered */
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}

/* The above is equivalent to the following */
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}

Source

/* Selects any paragraph inside a header, main
   or footer element that is being hovered */
:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* The above is equivalent to the following */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

Source