30 De Selectori CSS

Jeffrey Way 1. * * { margin: 0; padding 0; } * va aplica cele dou proprieti asupra tuturor elementelor din pagin. * poate fi aplicat i asupra selectorilor copil: #container * { border: 1px solid black; } 2. #X #container { width: 960px; margin: 0 auto; } Folosirea prefixului # pentru un selector ne permite s aplicm proprietile asupra elementului cu id-ul X ( n exemplu, container ). 3. .X .eroare { color: red; } .eroare reprezint o clas. Spre deosebire de id, class poate fi aplicat asupra unui grup de elemente. Este recomandat folosirea id doar n situaiile n care un element trebuie desemnat cu precizie. 4. X Y li a { text-decoration: none; } Selectorul descendent ( Y a ) este folosit cnd vrem s modificm o arie restrns de elemente: doar elementele a din cadrul unei liste, n acest exemplu. 5. X a { color: red; } ul { margin-left: 0; } Dac dorim s modificm toate elementele de pe o pagin, n funcie de tipul lor, vom folosi un selector tip. 6. X:visited i X:link a:link { color: red; } a:visited { color: purple; } Pseudoclasa :link se refer la legturile pe care nu am executat nc clic. Pseudoclasa :visited se refer la legturile accesate. 7. X + Y ul + p { color: red; } ul + p reprezint un selector adiacent: va fi selectat doar elementul care este precedat direct de elementul anterior aici, doar primul paragraf dup fiecare ul.

8. X > Y div#container > ul { border: 1px solid black; } Diferena dintre 'X Y' i 'X > Y' const n faptul c ultimul va selecta doar copiii direci ai lui X. Pentru exemplificare, se va lua n considerare urmtorul marcaj: <div id="container"> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div> Selectorul #container > ul va inti doar elementele ul care sunt copiii direci ai div-ului cu id-ul container. Nu va avea nici un efect asupra ul-ului copil al primului li. 9. X ~ P ul ~ p { color: red; } Similar 'X + Y', dar mai puin strict. Un selector adiacent ul + p ar fi selectat doar primul paragraf care urmeaz imediat unei liste, n timp ul ~ p va selecta orice element p, cu condiia ca acesta s urmeze unui ul. 10. X[titlu] a[title] { color: green; } Acest exemplu se refer la un selector de atribut. Va afecta doar acele elemente a care au proprietatea title. 11. X[href=foo] a[href=http://net.tutsplus.com] { color: #1f6053; } Codul de mai sus va colora n verde toate legturile care trimit ctre net.tutsplus.com 12. X[href*=tuts] a[href*=tuts { color: #lf6053; } Asteriscul care urmeaz href face posibil evidenerea cu verde a oricrei legturi care conine irul de caractere tuts. Spre deosebire de exemplul anterior, acesta ofer mai mult flexibilitate, innd cont de faptul c o legtur poate suferi anumite modificri. 13. X[href^=http] a[href^=http] { background: url (iconi.png) no-repeat; padding-left: 10px; } Accentul circumflex ^ indic n expresiile regulate nceputul unui ir. a[href^=http] va

intit toate elementele a a cror proprietate href ncepe cu http. 14. X[href$=.jpg] a[href$=.jpg] { color: red; } n expresiile regulate, $ nseamn sfritul unui ir. n acest exemplu, toate legturile ctre fiiere JPEG vor fi evideniate cu rou. 15. X[data-*=foo] a[data-filetype=image] { color: red; } Dac vrem s stilizm toate tipurile de fiiere imagine, am putea crea selectori multipli: a[href$=.jpg], a[href$=.jpeg], a[href$=.gif], a[href$=.png] { color: red; } Totui, o soluie mai eficient este folosirea unor proprieti personalizate, prin adugarea proprietii data-filetype ctre fiecare legtur care trimite la o imagine: <a href=cale/ctre/imagine data-filetype=image> Legtur imagine </a> 16. X[foo~=bar] a[data-info~=external] { color: red; } a[data-info~=image] { border: 1px solid black; } Simbolul tild ~ ne permite s intim o proprietate care are o list de valori separate de spaii. Vom crea o proprietate personalizat, data-info, care poate primi o list cu valorile de interes n acest caz, legturile externe i legturile ctre imagini: <a href=cale/ctre/imagine data-info=imagine extern>Click Me, Fool</a> Cu ajutorul acestui marcaj, putem manipula orice etichet care are una din cele dou valori, folosind ~: /* intete proprietatea data-info cu valoarea extern */ a[data-info~=extern] { color: red; } /* i proprietatea data-info cu valoarea imagine */ a[data-info~=imagine] { border: 1px solid black; } 17. X:checked input[type=radio]:checked { border: 1px solid black; } Pseudoclasa :checked va afecta doar un element care a fost bifat, cum ar fi un buton radio. 18. X:after Pseudoclasele :before i :after genereaz coninut n jurul elementului selectat.

Una din cele mai cunoscute utilizri: clear-fix: .clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; } Acest truc este o alternativ la overflow: hidden. 19. X: hover div:hover { background: #e3#e3; } Stilizeaz un element atunci cnd mausul se afl deasupra acestuia. Folosit de cele mai multe ori pentru legturi: a:hover { border-bottom: 1px solid black; } border-bottom: 1px solid black; are un aspect mai estetic dect textdecoration: underline;. 20. X:not(selector) div:not(#container) { color: blue; } Exemplul de mai sus va selecta toate div-urile, n afar de cel care are id-ul container. Folosind clasa de negare, putem selecta toate elementele, n afar de cel pentru paragraf: *:not(p) { color: green; } 21. X::pseudoElement p::first-line { font-weight: bold; font-size: 1.2em; } Pseudoelementele pot fi folosite pentru a stiliza doar un fragment dintr-un element, cum ar fi prima linie sau prima liter. Ele sunt precedate de ::. Selectarea Primei Litere Dintr-Un Paragraf p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; } Selectarea Primei Linii Dintr-Un Paragraf: p::first-line {

font-weight: bold; font-size: 1.2em; } 22. X:nth-child(n) li:nth-child (3) { color: red; Pseudoclasa :nth-child permite selectarea unui element n funcie de poziia dintr-o stiv. Dac dorim s selectm al doilea element dintr-o list, vom folosi: li-nth-child(2). Dac vrem s selectm fiecare al patrulea item dintr-o list: li-nth-child(4n) 23. X:nth-last-child(n) li:nth-last-child(2) { color: red; } Tehnica utila atunci cand dorim s modificm o list, de exemplu, dar ncepnd cu un item de la captul listei. Numrul dat ca argument reprezint poziia n list raportat fa de ultimul element. n exemplu, este selectat penultimul li al doilea, pentru c numrtoarea este fcut ncepnd cu ultimul li. 24. X:nth-of-type(n) ul:nth-of-type(3) { border: 1px solid black; } Uneori este nevoie s selectm n funcie de tipul elementului. n exemplul de mai sus, doar a treia list neordonat dintr-o pagin va fi ncadrat de un chenar. 25. X:nth-last-of-type(n) ul:nth-last-of-type(3) { border: 1px solid black; } Aceast pseudoclas selecteaz elementele n funcie de poziia lor n cadrul unei liste de elemente de acelai tip. Dac primete ca argument un numr N, :nth-last-of-type(N) va selecta toate elementele care sunt urmate de n-1 elemente de acelai tip din elementul printe. 26. X:first-child ul li:first-child { border-top: none; } Aceast pseudoclas va selecta doar primul copil al elementului printe. Frecvent folosit pentru a elimina, de exemplu, marginea de la primul item dintr-o list. 27. X:last-child ul > li:last-child { color: green; } Pseudoclas cu efect opus :first-child. Utilitatea ultimelor dou clase poate fi demonstrat n urmtorul exemplu. Se va folosi un marcaj simplu pentru o list: <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> Vor fi aplecate urmtoarele reguli CSS:

ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0; } li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c; } Marginile sunt aplicate fiecrui item ( border-top i border-bottom ) pentru a crea impresia de adncime. Pentru impresia de adncime, se aplic un border-bottom asupra fiecrui li uor mai ntunecat dect fundalul li i un border-top cu o idee mai luminos fa de fundal.

Vor fi eliminate bordurile primului i ultimului item, din cauza aspectului inestetic: li:first-child { border-top: none; } li:last-child { border-bottom: none; } 28. X:only-child div p:only-child { color: red; } Pseudoclasa :only-child, dup cum o arat i numele, este aplicat asupra unui element care

este singurul copil al printelui su. Se va lua n considerare urmtorul marcaj: <div><p>Un singur paragra</p></div> <div> <p>Dou paragrafe</p> <p>Dou paragrafe</p> </div> Regula de mai sus va fi aplicat doar asupra primului div. 29. X:only-of-type li:only-of-type { font-weight: bold; } Aceast pseudoclas va selecta un element doar dac nu mai exist un alt element de acelai tip n containerul printe. Este util atunci cnd vrem s selectm toate elementele ul cu un singur item daca am folosi selectorul ul li, am selecta toi itemii: ul > li:only-of-type { font-weight: bold; } 30. X:first-of-type Cu pseudoclasa :first-of-type putem selecta primul element dintr-o serie de elemente de acelai tip. Se va lua n considerare marcajul de mai jos:
<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

Problema: Selectarea List Item 2 Soluia 1 ul:first-of-type > li-nth-child(2) { font-weight: bold; } Soluia 2 p + ul:last-child { font-weight: bold; } Soluia 3 ul:first-of-type li:nth-last-child (1) { font-weight: bold; } Este selectat primul ul din pagin, iar apoi primul item al listei, dar ncepnd de la coad!