Kokius CSS selektorius žinote?

• Visuotininkas selektorius (*) - pasirinko visus elementus.
• Tipo selektorius (elementas) - pasirinko nurodyto tipo elementus.
• Klasės selektorius (.klasė) - pasirinko elementus su nurodyta klase.
• Identifikatoriaus selektorius (#id) - pasirinko elementą su nurodytu identifikatoriumi.
• Attribiuto selektorius ([atributas], [atributas="reikšmė"], [atributas~="reikšmė"], [atributas|="reikšmė"], [atributas^="reikšmė"], [atributas$="reikšmė"], [atributas*="reikšmė"]) - pasirinko elementus pagal atributų buvimą ar reikšmę.
• Pseudo-klasės (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(selektorius)) - pasirinko elementus tam tikroje būsenoje ar padėtyje.
• Pseudo-elementai (::before, ::after, ::first-line, ::first-letter, ::selection) - pasirinko elemento dalis.
• Kombinatoriai:
  • Palikuonių selektorius (selektorius selektorius) - pasirinko pirmojo selektoriaus palikuonius.
  • Tiesioginius palikuonius žymintis selektorius (selektorius > selektorius) - pasirinko tiesioginius palikuonius.
  • Šeimininkas brolis (selektorius + selektorius) - pasirinko pirmojo selektoriaus tiesioginį brolį.
  • Bendra brolis (selektorius ~ selektorius) - pasirinko visus brolio elementus.

Pavyzdžiai:

/* Visuotininkas selektorius */
* {
  margin: 0;
  padding: 0;
}

/* Tipo selektorius */
p {
  line-height: 1.5;
}

/* Klasės selektorius */
.highlight {
  color: yellow;
}

/* Identifikatoriaus selektorius */
#main-header {
  font-size: 2em;
}

/* Attribiuto selektorius */
[href] {
  text-decoration: none;
}
[type="button"] {
  cursor: pointer;
}

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

/* Pseudo-elementas */
p::first-letter {
  font-weight: bold;
}

/* Kombinatoriai */
div p {
  margin-bottom: 10px; /* Paragrafo viduje div */
}
ul > li {
  list-style: none; /* Tiesioginiai li palikuoniai ul viduje */
}
h2 + p {
  margin-top: 5px; /* Paragrafo, kuris iš karto po h2 */
}
h3 ~ p {
  color: gray; /* Visi paragrafo po h3 */
}