Ի՞նչ CSS ընտրիչներ եք գիտակցում:

• Համընդհանուր ընտրիչ (*) - ընտրում է բոլոր տարրերը:
• Տիպի ընտրիչ (էլեմենտ) - ընտրում է նշված տիպի տարրերը:
• Կլասի ընտրիչ (.կլաս) - ընտրում է նշված կլասով տարրերը:
• Հիշատակման ընտրիչ (#id) - ընտրում է նշված նույնականացնողով տարրերը:
• Ատրիբուտի ընտրիչ ([ատրիբուտ], [ատրիբուտ="արժեք"], [ատրիբուտ~="արժեք"], [ատրիբուտ|="արժեք"], [ատրիբուտ^="արժեք"], [ատրիբուտ$="արժեք"], [ատրիբուտ*="արժեք"]) - ընտրում է տարրերը ըստ ատրիբուտի առկայության կամ արժեքի:
• Փսևդոկլասներ (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(ընտրիչ)) - ընտրում է տարրերը որոշակի վիճակում կամ դիրքում:
• Փսևդոակնկալներ (::before, ::after, ::first-line, ::first-letter, ::selection) - ընտրում են տարրի մասերը:
• Կոմբինատորներ:
  • Որդեգրված ընտրիչ (ընտրիչ ընտրիչ) - ընտրում է առաջին ընտրիչի որդիներին:
  • Անհատական որդիների ընտրիչ (ընտրիչ > ընտրիչ) - ընտրում է անմիջական որդիներին:
  • Հաջորդ եղբայրների ընտրիչ (ընտրիչ + ընտրիչ) - ընտրում է անմիջական եղբորը:
  • Ընդհանուր եղբայրների ընտրիչ (ընտրիչ ~ ընտրիչ) - ընտրում է բոլոր եղբայրներին:

Օրինակներ:

/* Համընդհանուր ընտրիչ */
* {
  margin: 0;
  padding: 0;
}

/* Տիպի ընտրիչ */
p {
  line-height: 1.5;
}

/* Կլասի ընտրիչ */
.highlight {
  color: yellow;
}

/* Հիշատակման ընտրիչ */
#main-header {
  font-size: 2em;
}

/* Ատրիբուտի ընտրիչ */
[href] {
  text-decoration: none;
}
[type="button"] {
  cursor: pointer;
}

/* Փսևդոկլաս */
a:hover {
  text-decoration: underline;
}
li:nth-child(odd) {
  background-color: #f0f0f0;
}

/* Փսևդոակնկալ */
p::first-letter {
  font-weight: bold;
}

/* Կոմբինատորներ */
div p {
  margin-bottom: 10px; /* Պարագրաֆներ ներսից div */
}
ul > li {
  list-style: none; /* անմիջական որդիներ li ներսից ul */
}
h2 + p {
  margin-top: 5px; /* Պարագրաֆ, որը անմիջապես հաջորդում է h2-ին */
}
h3 ~ p {
  color: gray; /* Բոլոր պարագրաֆները հետո h3-ի */
}