Skip to main content

Pseudoclasses, Pseudoelements i Combinadors

Aquest capítol explora selectores avançats que et permeten controlar l'estil dels elements HTML segons el seu estat, posició o relació amb altres elements.

Pseudoclasses​

Les pseudoclasses permeten seleccionar elements en certs estats o condicions. Es defineixen amb : després d’un selector.

Selectores de comportament​

a:hover {
  color: green;
}
a:active {
  color: red;
}
a:link {
  color: blue;
}
a:visited {
  color: orange;
}

Selectores de posició​

li:first-child {
  font-weight: bold;
}
li:last-child {
  font-weight: bold;
}
li:nth-child(3) {
  font-weight: bold;
}
li:nth-child(odd) {
  font-weight: bold;
}
li:nth-child(even) {
  font-weight: bold;
}
li:nth-child(5n) {
  font-weight: bold;
}

Diferències entre :nth-child() i :nth-of-type()​

li:nth-child(2n) {
  font-weight: bold;
}
li:nth-of-type(2n) {
  color: blue;
}

Altres pseudoclasses útils​

:not(p) {
  font-weight: bold;
}
p:not(.mi-classe) {
  font-weight: bold;
}

div:empty {
  background: green;
  height: 10px;
}

input:required {
  background-color: pink;
}
input:disabled {
  opacity: 0.5;
}
input[type="text"]:valid {
  background-color: lightgreen;
}
input[type="email"]:invalid {
  background-color: red;
}

Pseudoelements​

Els pseudoelements permeten seleccionar i estilar parts específiques d’un element. S’escriuen amb ::.

Exemples comuns​

p::before {
  content: "«";
}
p::after {
  content: "»";
}

p::first-line {
  text-transform: uppercase;
}
p::first-letter {
  font-size: 30px;
  color: red;
}

p::selection {
  background-color: orange;
  color: black;
}

Combinadors​

Els combinadors permeten seleccionar elements basats en la seva relació amb altres elements.

Descendent (espai)​

Selecciona qualsevol element dins d’un altre.

main h1 {
  background-color: yellow;
  color: black;
}

Fill directe (>)​

Només selecciona fills directes.

section > h1 {
  background-color: yellow;
}

Germà adjacent (+)​

Selecciona l’element immediat següent.

h1 + ul {
  background-color: green;
}

Germans generals (~)​

Selecciona tots els germans posteriors.

h1 ~ p {
  background-color: aqua;
}

Aquest mòdul et dona les eines per fer CSS molt més específic, modular i potent. Dominar les pseudoclasses, pseudoelements i combinadors et permetrà adaptar l'estil de forma precisa segons l'estructura i l'estat dels elements.