Ce selectori CSS cunoști?

• Selector universal (*) - selectează toate elementele.
• Selector de tip (element) - selectează elemente de un anumit tip.
• Selector de clasă (.clasă) - selectează elemente cu o anumită clasă.
• Selector de identificator (#id) - selectează un element cu un anumit identificator.
• Selector de atribut ([atribut], [atribut="valoare"], [atribut~="valoare"], [atribut|="valoare"], [atribut^="valoare"], [atribut$="valoare"], [atribut*="valoare"]) - selectează elemente în funcție de prezența sau valoarea atributului.
• Pseudo-clase (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(selektor)) - selectează elemente în anumite stări sau poziții.
• Pseudo-elemente (::before, ::after, ::first-line, ::first-letter, ::selection) - selectează părți ale unui element.
• Combinatori:
  • Selector descendent (selector selector) - selectează elementele descendente ale primului selector.
  • Selector copil direct (selector > selector) - selectează copiii direcți ai primului selector.
  • Selector frate adiacent (selector + selector) - selectează elementul care este frate imediat (următor) al primului selector.
  • Selector frate general (selector ~ selector) - selectează toți frații (următorii) ai primului selector.

Exemple:

/* Selector universal */
* {
  margin: 0;
  padding: 0;
}

/* Selector de tip */
p {
  line-height: 1.5;
}

/* Selector de clasă */
.highlight {
  color: yellow;
}

/* Selector de identificator */
#main-header {
  font-size: 2em;
}

/* Selector de atribut */
[href] {
  text-decoration: none;
}
[type="button"] {
  cursor: pointer;
}

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

/* Pseudo-element */

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

/* Combinatori */
div p {
  margin-bottom: 10px; /* Paragrafe din interiorul unui div */
}
ul > li {
  list-style: none; /* Copii direcți ai li din interiorul ul */
}
h2 + p {
  margin-top: 5px; /* Paragraf care urmează imediat după h2 */
}
h3 ~ p {
  color: gray; /* Toate paragrafele după h3 */
}