Lecția 2: Selectorii CSS

1. Ce este un selector?

Un selector CSS indică elementul (sau grupul de elemente) HTML căruia îi vor fi aplicate stilurile definite în fișierul CSS.

Structura unei reguli CSS este:

selector {
  proprietate: valoare;
}

2. Selectorul după nume de element (tag)

Aplică stiluri tuturor elementelor de un anumit tip.

p {
  color: blue;
}

→ Toate paragrafele <p> vor avea text albastru.

3. Selectorul după clasă – .nume-clasa

Aplicați un stil doar elementelor care au o anumită clasă.

.important {
  font-weight: bold;
  color: red;
}

HTML-ul corespondent:

<p class="important">Acest text este important.</p>

→ Clasa poate fi folosită de mai multe ori în aceeași pagină.

4. Selectorul după id – #nume-id

Aplică stiluri unui element unic cu un anumit ID.

#titlu {
  text-align: center;
  font-size: 24px;
}

HTML-ul corespondent:

<h1 id="titlu">Bine ai venit!</h1>

Atenție: ID-ul trebuie să fie unic pe pagină!

5. Selector universal – *

Aplică stiluri tuturor elementelor HTML din pagină.

* {
  margin: 0;
  padding: 0;
}

→ Se folosește uneori pentru „resetarea” stilurilor implicite ale browserului.

6. Selectori de grup – selector1, selector2

Permite aplicarea acelorași stiluri la mai multe elemente simultan.

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

→ Toate titlurile de nivel 1, 2 și 3 vor avea același font.

7. Selector de descendență – element1 element2

Aplică stiluri doar elementelor element2 aflate în interiorul element1.

div p {
  color: green;
}

→ Numai paragrafele din interiorul <div> vor fi verzi.

8. Selector de copil direct – element1 > element2

Aplică stiluri doar elementelor copil direct (nu descendenți multipli).

ul > li {
  list-style-type: square;
}

→ Se aplică doar <li> care sunt copii direcți ai <ul>.

9. Exemplu combinat de stiluri

Un exemplu care combină mai mulți selectori:

<style>
  body {
    font-family: Calibri;
  }
  h1 {
    color: darkred;
  }
  .accent {
    background-color: yellow;
  }
  #footer {
    font-size: 12px;
    text-align: center;
  }
</style>

10. Concluzie

Selectorii CSS sunt esențiali pentru controlul precis al elementelor dintr-o pagină. În lecțiile următoare vom învăța cum să folosim proprietăți CSS pentru a schimba culoarea, marginile, dimensiunea textului și altele.