Selectori CSS
Găsirea (sau selectarea) elementelor HTML pe care vrei să le stilizezi este ceea ce fac selectorii CSS.
Aceștia se împart în cinci grupuri:
- Selectorii simpli aleg elementele după nume, id sau clasă.
- Selectorii combinatori se uită la relația dintre elemente.
- Selectorii de pseudo-clase depind de o anumită stare.
- Selectorii de pseudo-elemente stilizează doar o parte a unui element.
- Selectorii de atribute verifică existența unui atribut sau valoarea acestuia.
Cei mai de bază selectori CSS sunt subiectul acestei pagini.
Selectorul CSS de element
Selectorului de element îi este suficient numele etichetei pentru a alege elementele HTML.
Exemplu
Fiecare element <p> de pe această pagină primește text roșu, aliniat la centru.
<style>.
Selectează toate elementele <p> după nume și fă-le centrate cu text roșu. Include câteva paragrafe.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS element Selector</title>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Selectorul CSS de id
Pentru a ajunge la un anumit element, selectorul de id se bazează pe atributul id al elementului.
Deoarece un id este unic pe o pagină, este vizat un singur element.
Selectorul în sine este un diez (#) urmat de id.
Notă: Id-ul scris după diez nu poate începe cu o cifră.
Exemplu
Elementul cu id="para1" primește această regulă.
<style>.
Stilizează doar elementul cu id="para1" folosind #para1, făcându-l centrat cu text roșu. Include un paragraf cu acel id și câteva alte paragrafe fără el, astfel încât doar cel vizat să se schimbe.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS id Selector</title>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Selectorul CSS de clasă
Elementele care au un anumit atribut class sunt alese de selectorul de clasă.
Selectorul în sine este un punct (.) urmat de numele clasei.
O clasă poate fi limitată și la un singur tip de element, iar un element poate folosi liber mai multe clase.
Notă: Numele scris după punct nu poate începe cu o cifră.
Toate elementele cu o clasă
Orice are clasa center devine roșu și aliniat la centru.
<style>.
Folosește .center pentru a face ca toate elementele cu class="center" să fie centrate cu text roșu. Aplică clasa unui titlu și unui paragraf pentru a arăta că funcționează pe mai multe tipuri de elemente.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS class Selector</title>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Clasă pe un singur tip de element
Clasa center are efect doar asupra elementelor <p>, făcându-le roșii și aliniate la centru.
<style>.
Folosește p.center astfel încât doar elementele <p> cu class="center" să fie centrate cu text roșu. Include un titlu cu class="center" (care NU ar trebui să se schimbe) și un paragraf cu class="center" (care ar trebui să se schimbe).
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS class Selector on Paragraphs</title>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
Mai mult de o clasă
Două clase, center și large, stilizează simultan acest paragraf.
<style>.
Definește o clasă .center (text roșu, centrat) și o clasă .large (dimensiune mare a fontului). Adaugă un paragraf cu class="center large" astfel încât ambele reguli să i se aplice.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multiple CSS Classes</title>
<style>
.center {
text-align: center;
color: red;
}
.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading is red and center-aligned</h1>
<p class="center large">This paragraph refers to two classes.</p>
</body>
</html>