La fel ca si majoritatea incepatorilor in domeniul crearii
CSS layouturilor, la inceput stiam de
class,
id si
descendants selectors pe care ii foloseam toata ziua :)
Dar cu timpul am inteles ca sunt o sumedenie de selectori CSS pentru a face viata mai usoara creatorilor de layouturi, si markup-uri. Acesti selectori ofera un grad inalt de flxeibilitate si sunt suportate de majoritate browserelor moderne.
Mai jos o sa descriu 30 din acesti selectori, sper cuiva sa fei de ajutor, eu personal ii folosesc la putere maximala.
1. Selectorul *
* {
margin: 0;
padding: 0;
}
Sa incepem cu un selector mai simplu, pentru inceput. Simbolul * se foloseste pentru a viza orice element unic din pagina. Multi web developeri folosesc acest selector pentru a face nule toate
margin si
padding care au valori implicite ce difera de la browser la browser. Cu toate ca acest lucru este cu siguranta bun pentru a face careva teste rapide, totusi nu este de dorit de a folosi acest truc in productie, deoarece incarca mult browserul. Se mai poate de utilizat si impreuna cu child selectors:
#container * {
border: 1px solid black;
}
In exemplul de mai sus, se va viza toti copiii
HTML elementului cu ID-ul "container".
Browser Compatibility
- IE 6+
- Firefox
- Google Chrome
- Safari
- Opera
2. Selectorul #(ID)
#container {
width: 960px;
margin: auto;
}
Simbolul # in CSS ne permite de accesa un element HTML dupa
ID. Este foarte folosit pentru crearea layouturilor, dar,
ID selectors sunt destul de rigide si nu permit reutilizarea pentru alt element, deoarece ID-ul intr-un HTML document trebuie sa fie unic. Folositi pe cit posibil un tag, sau unul dintre elementele HTML5, sau o
pseudo clasa CSS, pentru a evita selectorul ID.
Browser Compatibility
- IE 6+
- Firefox
- Google Chrome
- Safari
- Opera
3. Selectorul .(CLASS)
.eroare {
color: red;
}
Acest este
selectorul class. Diferenta dintre id si class este: cu class putem viza mai multe elemente intro pagina HTML. Folositi class atunci cind aveti de stilizaat in acelasi mod un grup de elemente HTML.
Browser Compatibility
- IE 6+
- Firefox
- Google Chrome
- Safari
- Opera
4. Selectorul (descendants)
li a {
text-decoration: none;
}
Selectorul descendants se foloseste atunci cind dorim sa specificam mai precis ce element dorim sa stilizam. De exemplul, fie ca e nevoie sa stilizam doar ancorele dintr-o lista neordonata, atunci folosim descendants, la fel ca in exemplul de mai sus.
Browser Compatibility
- IE 6+
- Firefox
- Google Chrome
- Safari
- Opera
5. Selectorul (type)
a { color: red; }
ul { margin-left: 0; }
Atunci cind avem de stilizat toate elementele de un anumit tip intr-o pagina, folosim selectorul de tip. Daca dorim ca toate elementele din pagina de tip <a> sa aiba textul de culoare rosie, atunci folosim selectorul type.
Browser Compatibility
- IE 6+
- Firefox
- Google Chrome
- Safari
- Opera
6. Selectorul X:visited si X:link
a:link { color: red; }
a:visted { color: purple; }
Utilizam
pseuodo-class :link atunci cind vrem sa decoram ancorele care trebuie sa fie apasate.
Alternativ, mai avem si pseudo-clasa
:visited pentru a stiliza ancorele sau linkurile care au fost apasate, vizitate.
Browser Compatibility
- IE 7+
- Firefox
- Google Chrome
- Safari
- Opera
7. Selectorul (+)
ul + p {
color: red;
}
Se refera la slesctorul de adiacenta. Cu ajutorul sau se selecteaza DOAR primul element vecin de elementul de referinta. In cazul nostru numai primul paragraf <p>dupa fiece <ul> va avea culoare rosie.
Browser Compatibility
- IE 7+
- Firefox
- Google Chrome
- Safari
- Opera
8. CSS Selectorul (>)
div#container > ul {
border: 1px solid red;
}
Diferenta dintre > si descendants este: cu ajutorul ">" se pot selecta doar copii directi. de exemplu avem urmatorul fragment de markup:
<div id="container">
<ul>
<li> Item
<ul>
<li> Child </li>
</ul>
</li>
<li> Item </li>
<li> Item </li>
<li> Item </li>
</ul>
</div>
Selectorul
#container > ul va viza doar ulurile care sunt copii directi ai divului cu idul "container".
Browser Compatibility
- IE 7+
- Firefox
- Google Chrome
- Safari
- Opera
9. CSS Selecotorul ~
l ~ p {
color: red;
}
Acest
sibling selector este similar selectorului + dar mai putin strict. In timp ce cu + se poate de selectat doar elementul imediat dupa itemul de baza, acesta din urma este unul mult mai general. Cu ajutorul sau se selecteaza toate elementele ce urmeaza dupa elementul de baza in toata pagina HTML.
Browser Compatibility
- IE 7+
- Firefox
- Google Chrome
- Safari
- Opera
10. CSS Selector [title]
a[title] {
color: green;
}
Face referinta la un
attribute selector, adica, vor fi selectate toate elementele care au un anumit atribut, in cazul nostru atribut
title.
Browser Compatibility
- IE 7+
- Firefox
- Google Chrome
- Safari
- Opera
11. CSS Selector [href="foo"]
a[href="http://google.com"] {
color: olive;
}
In fragmentul descris de mai sus e demonstrat cum de stilizat o ancora care face referinta spre un anumit site.
Acest tip de selectare este destul de rigida, dar uneori se poate de folosit.
Browser Compatibility
- IE 7+
- Firefox
- Google Chrome
- Safari
- Opera
12. CSS Selector [href*="foo"]
a[href*="google"] {
color: olive;
}
Este asemanator cu selectorul precedent, doar ca, va formata toate elementele pentru care exista in atribut numele descris. In exemplul nostru, va formata toate ancorele in care va gasi pentru atributul
href numele "google". De notat ca este o astfel de selectare trebuie folosita cu atentie, deoarece se poate intimpla ca un link de exemplu, sa nu fie: mySubdomain.google.com ci de tipul http://mysite.com/google-page/ si in asa caz el la fel va fi stilizat, deoarece selectorul nostru este general si lui nui pasa unde gaseste cuvintul cheie in link.
Browser Compatibility
- IE 7+
- Firefox
- Google Chrome
- Safari
- Opera
13. CSS Selector [href^="http"]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 15px;
}
V-ati intrebat vreodata cum unele site-uri sunt capabile sa afiseze o pictograma mica de linga link-urile externe? Sunt sigur ca ati vazut, aceste pictograme sunt un indiciu excelent ca link-ul dat ne va directiona spre un alt site. Cu ajutorul slectorului [href^="http"] acest lucru este o floare la ureche :). Este cel mai frecvent utilizat pentru a desemna inceputul unui sir. Daca dorim sa vizam toate ancorele HTML care au un atribut href, al carui valoare se incepe cu
http, atunci e posibil de realizat in exemplul de mai sus.
Browser Compatibility
- IE 7+
- Firefox
- Google Chrome
- Safari
- Opera
14. CSS Selector [href$=".jpg"]
a[href$=".jpg"] {
color: red;
}
Acum, si daca dorim sa selectam sfirsitul unui sir(lucru foarte util atunci cind dorim sa stilizam imaginile de pe o pagina)? Ei bine pentru acest caz avem la dispozitie selectorul $ care ne face referinta la sfirsitul sirului dintr-un atribut. In exemplu se vor formata toate ancorele care sunt legate la o imagine
.jpg.
Browser Compatibility
- IE 7+
- Firefox
- Google Chrome
- Safari
- Opera
15. CSS Selectors [data-*="foo"]
a[data-filetype="image"] {
color: red;
}
Dar daca dorim sa selectam toate tipurile de imagini? Am putea sa folosim selctorul din punctul 14:
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
Insa nu este foarte comod acest tip de selectare, si ne complica destul de mult codul CSS. O solutie mai convenabila ar fi sa folosim atribute personalizate, cum ar fi sa adaugam atributul nostru
data-filetype pentru fiecare ancora care ne indica un link catre o imagine
<a href="path/to/myImage.jpg" data-filetype="image"> Image Link </a>
Apoi, avind acest atribut, putem sa folosim o regula care sa vizeze doar acele ancore
a[data-filetype="image"] {
color: red;
}
Browser Compatibility
- IE 7+
- Firefox
- Google Chrome
- Safari
- Opera
