Selectori CSS și pseudo-clase

Dacă tot a scăzut îmbucurător de mult cota de piață a IE6 (sub 8%), putem folosi și noi, în sfârșit, ceva selectori mai avansați și pseudo-clase pe toate elementele (:hover este inclus!). Prin urmare, m-am gândit să fac o scurtă listă cu selectori pe care îi putem folosi fără probleme de acum înainte. Pentru a evita situații amuzante, voi evita traducerea termenilor. Să începem!

Attribute Selector

În situația în care aveai un input type="text" și un input type="password" și vroiai să le stilizezi separat, trebuia să îi aplici fiecărui element o clasă, după care urma să te distrezi cu acea clasă. Acum poți face ceva de genul:

input[type="text"] { border-color:red; }
input[type="password"] { border-color:blue; }

Desigur, se aplică la orice element. De exemplu, poți selecta div-urile ce au atributul style. Astfel, dacă în cod ai:

<div style="..."></div>

Poți selecta acel div prin:

div[style]

Cool, nu? În plus, poți stiliza linkurile externe (sau linkurile spre o anumită pagină; sau linkurile spre anumite fișiere de un anume tip) folosind câțiva operatori împrumutați din expresiile regulate: $, ^ și ~.

a[href^="http://iamntz.com"] { /* selectez linkurile care încep cu http://iamntz.com */
color:blue;
}

Mai multe detalii despre astfel de selectori aici.

Child Selector

Chiar dacă până acum îl puteam folosi doar pentru a „ocoli” IE6, a venit timpul să-l utilizăm la adevărata valoare. Se dă codul:

<ul>
	<li>nivel 1</li>
	<li>nivel 1
		<ul>
			<li>nivel 2
				<ul>
					<li>nivel 3</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Până nu de mult, pentru a selecta doar primul nivel de li, singura modalitate era de a folosi o clasă suplimentară. Acum se poate face foarte frumos:

ul>li {...}

Nu tu clase suplimentare, nu tu alte minuni enervante și greu de întreținut. Acest selector este foarte folositor când construiești un meniu suckerfish.

Adjacent Sibling Selector

Foarte scurt spus, din codul de mai jos poți selecta două elemente alăturate:

<h3>...</h3>
<div>...</div>
<div>...</div>
<div>...</div>

h3+div {...}

Din nou, te scutește de cod html suplimentar. De notat că în acest mod vei selecta doar primul element. Chiar dacă în sursă am trei div-uri, doar primul va corespunde „descrierii”. Pentru a putea selecta toate elementele, poți folosi…

General Sibling Selector

În același cod html, selectorul CSS arată astfel:

h3~div {...}

Pseudo-clase

:hover

Una din marile probleme ale IE6 era că nu puteai avea :hover decât pe ancore. Acum poți folosi fără probleme :hover pe orice element. Yay!

:first-child

Despre el am scris aici.

De notat că acești selectori pot fi buggy în unele browsere internet explorer (inclusiv 8), dar de cele mai multe ori, merg fără probleme.

Resurse

• Sitepoint CSS Reference
• W3Schools