რომელი 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; /* დივის შიგნით პარაგრაფები */
}
ul > li {
  list-style: none; /* პირდაპირი შვილები ლისტში */
}
h2 + p {
  margin-top: 5px; /* ჰ2-ის შემდეგ პარაგრაფი */
}
h3 ~ p {
  color: gray; /* ყველა პარაგრაფი ჰ3-ის შემდეგ */
}