CSS selektori

Lekcija 3: CSS selektori

Uvod

CSS selektori su način da odaberemo koji HTML element želimo da stilizujemo. Oni povezuju HTML strukturu sa CSS pravilima. U ovoj lekciji naučićemo:

osnovne selektore (element, .class, #id),
kombinovane i hijerarhijske selektore,
pseudo-klase i pseudo-elemente,
praktične primere inline i eksternog stilizovanja.

Primer osnovnih selektora

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>CSS selektori primer</title>
    <style>
      /* Selektor po elementu */
      p {
        color: blue;
      }

      /* Selektor po klasi */
      .highlight {
        background-color: yellow;
      }

      /* Selektor po ID */
      #main-title {
        font-size: 24px;
        color: darkred;
      }

      /* Pseudo-klasa */
      a:hover {
        color: green;
      }

      /* Pseudo-element */
      p::first-letter {
        font-size: 20px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1 id="main-title">Naslov stranice</h1>
    <p>Ovo je paragraf koji će biti plave boje.</p>
    <p class="highlight">Ovaj paragraf ima žutu pozadinu.</p>
    <a href="#">Ovo je link</a>
  </body>
</html>

Analiza primera

Selektor po elementu (p) Svi <p> tagovi dobijaju plavu boju teksta.
Selektor po klasi (.highlight) Samo elementi sa klasom highlight dobijaju žutu pozadinu.
Selektor po ID (#main-title) Jedinstveni element sa ID‑jem main-title dobija crvenu boju i veću veličinu fonta.
Pseudo-klasa (a:hover) Link menja boju kada se pređe mišem preko njega.
Pseudo-element (p::first-letter) Prvo slovo svakog paragrafa se uvećava i podebljava.

Inline stilizacija

Pored CSS fajla ili <style> bloka, stilovi se mogu dodati direktno u HTML tag pomoću atributa style. Primer:

html

<p style="color: purple; font-size: 18px;">Paragraf sa inline stilom</p>

Zaključak

CSS selektori su temelj stilizacije. Oni omogućavaju da precizno odaberemo elemente i primenimo pravila. Razumevanje selektora je ključno za naprednije tehnike poput Flexbox‑a i Grid‑a.