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^="https://iamntz.com"] { /* selectez linkurile care încep cu https://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

5 Comentarii to “Selectori CSS și pseudo-clase”

  1. OMG, cati ani am asteptat pana am ajuns in sfarsit sa putem folosi selectori css de genul acesta; in sfarsit un WIN pentru developeri.

  2. Ști ce, tocmai vroiam să corectez câteva erori de IE6 la portofolio meu, postul ăsta m-a facut să zic “Pas”.

    I’ll get a beer instead. Cheers.

  3. Staicu Ionuț-Bogdan

    Salut Dan, mulțumesc pentru comentariu. Mă bucur că te-am făcut să zici Pas :D

    Stai liniștit cu IE6. Încet, încet îi scade cota de piață suficient de mult pentru a putea fi ignorat.

    Oricum, poate că ar trebui să corectezi problemele cu diacriticele ;)

  4. Foarte util si curat. Ca de obicei, Ionut baga maxim la reducerea codului.:)

Show trackbacks
  1. […] Ultimul articol apărut pe A List Apart tratează problema extensiilor CSS3 dependente de browser. În articol se specifică în mod express border-radius, dar în aceeași categorie intră și alte chestii cool apărute în ultima vreme prin specificațiile CSS: opacity, box-shadow, text-shadow, rgba() și altele (selectori CSS3). […]

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>