Een overzicht voor gevorderde web-designers.

Target is CSS

De :is() en :where() pseudo-selectoren zijn relatief nieuwe toevoegingen aan CSS om elementen te selecteren die voldoen aan de criteria tussen haakjes. Met :is() kunnen we bijvoorbeeld elk p, h2 of ul element met de klasse test selecteren:

.test:is(p, h2, ul) {
  background: yellow;
}

Simpler Block Spacing in WordPress with :is() and :where()

List child nth CSS

/* Selecteer het eerste item in de lijst */
li:nth-child(1) { }

/* Selecteer het 5e lijst-item */
li:nth-child(5) { }

/* Selecteer elk ander lijst-item beginnend met de eerste */
li:nth-child(odd) { }

/* Selecteer elk 3e lijst-item, beginnend bij de eerste */
li:nth-child(3n - 2) { }

/* Selecteer elk 3e lijst-item beginnend bij de 2e */
li:nth-child(3n - 1) { }

/* Selecteer elk 3e child item, zolang het de class "el" heeft */
.el:nth-child(3n) { }

:nth-child

Child combinaties – parent CSS

/* List items die kinderen zijn van de "mijn-items" lijst */
ul.mijn-items > li {
  marge: 2em;
}

Child combinator