CSS-ში სელექტორი რა არის?

CSS-ში სელექტორი — ეს არის ნიმუში, რომელიც განსაზღვრავს, რომელი HTML ელემენტებზე უნდა გავრცელდეს სტილები. ის აჩვენებს ბრაუზერს, რომელი ერთი ან რამდენიმე ელემენტი უნდა შეირჩეს.

არსებობს სხვადასხვა ტიპის სელექტორები:

• ელემენტების სელექტორები (Type selectors): ირჩევენ HTML ელემენტის ყველა ეგზემპლარს:

  p { /* ირჩევს ყველა პარაგრაფს */
    color: blue;
  }
  

• კლასის სელექტორები (Class selectors): ირჩევენ ელემენტებს გარკვეული class ატრიბუტით:

  .highlight { /* ირჩევს ყველა ელემენტს კლასი "highlight"-ით */
    background-color: yellow;
  }
  

• ID სელექტორები (ID selectors): ირჩევენ ერთეულ ელემენტს გარკვეული id-ით:

  #header { /* ირჩევს ელემენტს id-ით "header" */
    font-size: 2em;
  }
  

• საერთო სელექტორი (Universal selector): ირჩევს ყველა ელემენტს:

  * { /* ირჩევს ყველა ელემენტს გვერდზე */
    margin: 0;
    padding: 0;
  }
  

• ატრიბუტის სელექტორები (Attribute selectors): ირჩევენ ელემენტებს მათი ატრიბუტების არსებობის ან მნიშვნელობის მიხედვით:

  [type="text"] { /* ირჩევს ყველა input-ს, რომლის type="text"-ია */
    border: 1px solid gray;
  }
  

• პსევდოკლასები (Pseudo-classes): ირჩევენ ელემენტებს მათი მდგომარეობის მიხედვით:

  a:hover { /* ირჩევს ლინკს მიკროსკოპის მიტანისას */
    text-decoration: underline;
  }
  

• პსევდომელემენტები (Pseudo-elements): ირჩევენ კონკრეტულ ნაწილებს ან ქმნიან "ფიქტიურ" ელემენტებს:

  p::first-line { /* ირჩევს პირველ ხაზს */
    font-weight: bold;
  }
  

• კომბინატორები (Combinators): განსაზღვრავენ ურთიერთობებს სელექტორებს შორის:

  კომბინატორი	აღწერა	მაგალითი
  სივრცე ( )	შთამომავლობის სელექტორი (Descendant selector)	div p
  >	შვილების სელექტორი (Child selector)	div > p
  +	მეზობელი ელემენტის სელექტორი (Adjacent sibling selector)	h1 + p
  ~	საერთო მეზობელი სელექტორი (General sibling selector)	h1 ~ p

სელექტორებს შეუძლიათ კომბინაცია, რათა უფრო ზუსტი იყოს ელემენტების განსაზღვრა.