Pentru a aplica anumite reguli css unui element, trebuie in primul rand sa stim cum sa ne adresam acelui element.
Altfel spus, cum ii spunem browser-ului ca noi vrem ca aceste reguli sa se aplice unui anumit element, sau mai multora.
Pentru aceasta exista cateva metode prin care putem vorbi cu un element.
Pentru a ne referi la un element HTML ne putem folosi de valoarea atributului id.
Folosind numele elementului
Stim din lectia trecuta ca ne putem adresa unui element HTML folosind numele lui (fara semnele < si >). De exemplu:
h1 {
color: blue;
font-size: 35px;
}
Problema este ca aceste doua reguli se aplica tuturor elementelor <h1> din pagina.
Daca de exemplu am avea urmatoarea pagina HTML care are in head cele doua reguli CSS si in body doua elemente <h1>:
<html>
<head>
<style>
h1 {
color: blue;
font-size: 35px;
}
</style>
</head>
<body>
<h1>Un element h1</h1>
<h1>Al doilea element h1</h1>
</body>
</html>
Atunci acele doua reguli s-ar aplica ambelor elemente <h1>. Poate noi am vrea ca doar primul element sa aiba textul albastru si font-ul de marimea 35px.
In acest caz trebuie sa fim mai specifici. Si anume, sa spunem in CSS ca vrem ca aceste reguli sa se aplice doar primului element <h1>. Dar pentru ca ele ca si tag-uri arata la fel, trebuie sa le adaugam un atribut pentru a le distinge.
Folosind atributul id
Pentru un element HTML atributul id este folositor pentru ca ii daofera acestuia un nume unic in pagina.
Folosind acest nume, noi putem sa ne adresam doar lui.
Daca de exemplu, am adauga atributul id primului element <h1>, pagina ar arata astfel:
<html>
<head>
<style>
h1 {
color: blue;
font-size: 35px;
}
</style>
</head>
<body>
<h1 id="primul-h1">Un element h1</h1>
<h1>Al doilea element h1</h1>
</body>
</html>
Inainte de a inchide primul tag am scris id apoi semnul = si apoi valoarea atributului intre ghilimele "". Este foarte important sa nu avem spatii in valoarea unui atribut, de aceea am folosit -.
Acum ne putem folosi de aceasta valoare pentru a ne adresa din CSS acestui element HTML.
Si de aceea vom inlocui regula de selectare din h1 in #primul-h1
#primul-h1 {
color: blue;
font-size: 35px;
}
Selectorul s-a schimbat din numele unui element in semnul # + primul-h1 (valoarea atributului id).
Semnul # este folosit in CSS pentru a preciza ca vrem sa folosim atributul id a unui element HTML pentru a comunica cu el.
Vedem ca dupa acesta nu urmeaza nici un spatiu, ci urmeaza direct valoarea atributului id: #primul-h1, exact ca un hashtag.
Acum daca vrem ca acele doua reguli sa se aplice si celui de-al doilea element <h1> trebui sa ii oferim si lui un atribut id. In acest caz pagina ar arata astfel:
<html>
<head>
<style>
#primul-h1 {
color: blue;
font-size: 35px;
}
</style>
</head>
<body>
<h1 id="primul-h1">Un element h1</h1>
<h1 id="al-doilea-h1">Al doilea element h1</h1>
</body>
</html>Dar pentru a ne adresa ambelor elemente trebuie sa insiruim cele doua id-uri separate prin virgula:
#primul-h1, #al-doilea-h1 {
color: blue;
font-size: 35px;
}
Daca am avea si un alt element in pagina, precum un <h2>, il putem trece si pe acesta in acea lista si acele reguli se vor aplica si lui. Atunci pagina ar arata astfel:
<html>
<head>
<style>
#primul-h1, #al-doilea-h1, h2 {
color: blue;
font-size: 35px;
}
</style>
</head>
<body>
<h1 id="primul-h1">Un element h1</h1>
<h1 id="al-doilea-h1">Al doilea element h1</h1>
<h2>Un element h2</h2>
</body>
</html>Dar daca dorim sa aplicam aceste reguli mai multor elemente din pagina ne vom trezi cu un sir lung de id-uri si elemente in aceasta lista. Si desi nu avem o limita pentru cate elemente putem pune in acel selector exista o metoda mai buna.
Folosind atributul class ne putem adresa mai multor element in acelasi timp. Vom discuta despre acesta in urmatoarea lectie.