Selectori CSS

O foaie de stil este un set de reguli. Pentru a defini o regulă este nevoie de un selector și o declarație. Selectorul precizează ce elemente din pagina web vor utiliza parametri definiți în declarație.

p  /*selector*/
{
	color: red; /*declarație*/
}

Iată o prezentare a celor mai frecvent utilizate selecții CSS, împreună cu exemple:

Selectori de bază

Selector	Descriere	Exemplu	Rezultat
element	Seleționează toate elementele de tip element	p	Toate paragrafele <p>
.clasa	Seleționează elementele cu clasa specificată	.button	Toate elementele cu clasa button
#id	Seleționează elementul cu ID-ul specificat	#header	Elementul cu ID header

Mai multe despre selectorii element: developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors.

Mai multe despre selectorii clasă: developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors.

mai multe despre selectorii ID: developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors.

Selecții după relații între elemente

Selector	Descriere	Exemplu	Rezultat
element1 element2	Elemente element2 care sunt copii (descendenți) ai lui element1	div p	Toate <p>-urile din interiorul unui <div>
element1 > element2	element2 ca și copil direct al lui element1	ul > li	<li>-urile directe într-un <ul>
element1 + element2	element2 care urmează imediat după element1	h1 + p	<p> care urmează imediat după un <h1>
element1 ~ element2	Toate element2 care urmează după element1 în același părinte	h1 ~ p	Toate <p>-urile după un <h1> în același container

Selectori de atribut

Selector	Descriere	Exemplu	Rezultat
[type=“text”]	Elemente cu atribut type egal cu “text”	input[type="text"]	<input type="text">
[href^=“https”]	Atribut href care începe cu https	a[href^="https"]	Link-urile HTTPS
[class*=“btn”]	Atribut class care conține btn	[class*="btn"]	Elemente cu clasa ce conține btn

Mai multe despre selectorii atribut: developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors.

Selecția după pseudoclasă și pseudoelement

Selector	Descriere Exemplu	Rezultat
a:hover	Linkurile a atunci când cursorul trece peste ele	a:hover { color: red; }	Schimbă culoarea linkurilor la hover
:first-child	Primul copil al unui element	p:first-child	Primele <p>-uri dintr-un container
:last-child	Ultimul copil	div > p:last-child	Ultimul <p> într-un <div>
::before	Pseudo-element pentru adăugarea de conținut înaintea elementului	p::before { content: "Note: "; }	Text adăugat înainte de paragrafe

Mai multe despre pseudoclase: developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes.

Mai multe despre pseudoelemente: developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements.

Selectori combinați

Se pot combina mai mulți selector pentru a selecta elemente precise:

div.content > p.article:first-letter {
  color: blue;
}

Regula de mai sus se aplică la prima literă dintr-un paragraf <p> cu clasa article care este copil al unui <div> care are clasa content.