Milyen CSS szelektorokat ismersz?

• Univerzális kiválasztó (*) - minden elemet kiválaszt.
• Típus kiválasztó (elem) - adott típusú elemeket választ ki.
• Osztály kiválasztó (.osztaly) - adott osztállyal rendelkező elemeket választ ki.
• Azonosító kiválasztó (#id) - adott azonosítóval rendelkező elemet választ ki.
• Attribútum kiválasztó ([attribútum], [attribútum="érték"], [attribútum~="érték"], [attribútum|="érték"], [attribútum^="érték"], [attribútum$="érték"], [attribútum*="érték"]) - attribútum jelenlétére vagy értékére alapozva választ ki elemeket.
• Pseudo-osztályok (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(sorozat)) - adott állapotban vagy helyen lévő elemeket választ ki.
• Pseudo-elemek (::before, ::after, ::first-line, ::first-letter, ::selection) - elemek részeit választja ki.
• Kötőjelzők:
  • Leszármazott kiválasztó (kiválasztó kiválasztó) - az első kiválasztó leszármazottait választja ki.
  • Közvetlen gyermek kiválasztó (kiválasztó > kiválasztó) - az első kiválasztó közvetlen gyermekeit választja ki.
  • Szomszédos testvér kiválasztó (kiválasztó + kiválasztó) - az első kiválasztó közvetlenül következő testvérét választja ki.
  • Általános testvér kiválasztó (kiválasztó ~ kiválasztó) - az első kiválasztó összes testvérét választja ki.

Példák:

/* Univerzális kiválasztó */
* {
  margin: 0;
  padding: 0;
}

/* Típus kiválasztó */
p {
  line-height: 1.5;
}

/* Osztály kiválasztó */
.highlight {
  color: yellow;
}

/* Azonosító kiválasztó */
#main-header {
  font-size: 2em;
}

/* Attribútum kiválasztó */
[href] {
  text-decoration: none;
}
[type="button"] {
  cursor: pointer;
}

/* Pseudo-osztály */
a:hover {
  text-decoration: underline;
}
li:nth-child(odd) {
  background-color: #f0f0f0;
}

/* Pseudo-elem */

p::first-letter {
  font-weight: bold;
}

/* Kötőjelzők */
div p {
  margin-bottom: 10px; /* beágyazott bekezdések div-ben */
}
ul > li {
  list-style: none; /* közvetlen li gyermekek ul-ben */
}
h2 + p {
  margin-top: 5px; /* közvetlenül h2 után következő bekezdés */
}
h3 ~ p {
  color: gray; /* összes bekezdés h3 után */
}