În acest ultim tutorial despre selectori, vă voi prezenta o formă foarte specială de selectori. Aceștia sunt cunoscuți sub numele de pseudo-clase și pseudo-elemente. Aceștia sunt selectori care nu se referă la anumite elemente HTML, ci sunt generate de dispozitivul de ieșire.
Prin utilizarea pseudo-claselor și pseudo-elementelor, pot fi definite declarații pentru elemente HTML care nu pot fi descrise în mod clar printr-un element HTML. Exemple tipice includ un hyperlink care a fost accesat recent sau un hyperlink care nu a fost accesat încă.
Stilizarea hyperlinkurilor
De multe ori, dorim să stilizăm hyperlinkurile de pe pagină. CSS oferă numeroase posibilități prin care se pot adresa și stiliza diferitele stări ale hyperlinkurilor.
Dacă doriți să atribuiți unui hyperlink o culoare roșie, arată astfel:
a:link {
color: red;
}
Cu a:visited, hyperlinkurile deja accesate sunt marcate. Prin sintaxa următoare, aceste hyperlinkuri care au fost accesate odată, pot fi afișate cu culoare albastră.
a:visited {
color:blue;
text-decoration:none;
}În browser, arată astfel:
Dacă doriți să stilizați în mod diferit hyperlinkurile care sunt accesate în acel moment, acest lucru este de asemenea posibil.
a:active {
font-weight: bold;
color: blue;
text-decoration: none;
}
Se folosește sintaxa a:active.
Sintaxa a:hover se referă la starea în care mouse-ul este deasupra hyperlinkului. În plus, cu a:focus există un alt pseudo-element. Acesta descrie momentul în care hyperlinkul primește focalizarea.
Alte pseudo-elemente
Există pseudo-elemente care permit să fie adresate părți ale altor elemente. Un exemplu tipic este ::first-letter. Acest pseudo-element selectează prima literă a elementului curent. Acesta poate fi folosit pentru toate elementele care conțin text. Dar atenție: pseudo-elementele trebuie să fie notate doar la sfârșitul tuturor selectorilor. Deci, ele trebuie să fie înainte de acoladele deschise.
h1::first-letter {
color: blue;
}
Prin ::first-line se poate adresa prima linie a unui element. Acest pseudo-element este aplicabil exclusiv elementelor la nivel de bloc. Un exemplu:
p::first-line {
background-blue;
}
Și iată rezultatul în browser:
un
Cu ajutorul pseudo-elementelor :after și :before, pot fi afișate conținuturi adiționale înainte și după un element. Prin content se stabilește ce trebuie afișat.
• normal – pseudo-elementul definit în mod obișnuit nu este generat.
• none – pseudo-elementul nu este generat.
• <string> – se afișează șirul de caractere specificat aici. Șirurile de caractere trebuie să fie delimitate de ghilimele simple sau duble.
• <uri> – resursa specificată printr-un URI este inserată.
• <counter> – definește un contor sau adresează un anumit contor.
• attr(<identifier>) – valoarea atributului specificat între paranteze este inserată.
• close-quote – inseră un ghilimea finală.
• no-close-quote – nu se inserează o ghilimea finală, dar adâncește nivelul de imbricare cu un pas.
• no-open-quote – nu se inserează o ghilimea inițială, dar adâncește nivelul de imbricare cu un pas.
• open-quote – se inserează o ghilimea inițială.
Un exemplu:
ul li:before {
content: uri("bullet.gif");
}
De asemenea, cu CSS3 a fost introdus pseudoselectorul :not. Prin intermediul acestuia, se pot selecta în mod simplu anumite conținuturi. Un prim exemplu arată cât de puternic este de fapt acest pseudoselector. Să presupunem că doriți să selectați toate hyperlinkurile care nu au atributul href. Sintaxa corespunzătoare ar arăta astfel:
a:not([href])
Hyperlinkurile "normale" nu sunt afectate de această sintaxă. Cu toate acestea, accesul la definițiile ancoră ar fi posibil.
<a name="top">Începutul paginii</a>
Un exemplu mai detaliat arată puterea lui :not. În cadrul unui document, au fost definite diverse paragrafe de text.
<body> <h1>PSD-Tutorials.de</h1> <p>Acesta este un paragraf.</p> <p>Acesta este un alt paragraf.</p> <div>Acesta este un bloc de text.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Pe lângă paragrafele marcate cu p, există și o zonă div și un hyperlink. Acum să se întâmple următoarele:
• Toate paragrafele marcate cu p vor avea culoarea textului neagră.
• În schimb, acolo unde nu există paragrafe p, culoarea textului va fi roșie.
Corporația CSS corespunzătoare arată astfel:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Principiul de moștenire
Unul dintre cele mai importante aspecte atunci când vine vorba de înțelegerea definițiilor CSS este moștenirea. De fapt, în CSS, stilurile unui element sunt moștenite de la un element la altul.
Un exemplu:
html {
color: red
}Prin această definiție, elementului html i se atribuie culoarea roșie a textului.
Datorită principiului de moștenire, această definiție a culorii se aplică în primul rând tuturor elementelor subordonate html. Așadar, elementele sub html sunt în mod implicit afișate inițial în roșu. Avantajul acestei variante este că nu trebuie să stabiliți explicit culoarea roșie pentru aceste elemente. Dar ce se întâmplă dacă conținutul paragrafelor p nu trebuie să fie afișat în roșu? Atunci trebuie să suprascrieți definiția de culoare superioară a html-ului.
html {
color: red;
}
p {
color: #000;
}
Ce se întâmplă când există două elemente p și div?
<body> <p>PSD-Tutorials.de</p> <div>Welt</div> </body>
Rezultatul arată astfel:
Definiția de culoare a html-ului afectează exclusiv conținutul div-ului. În schimb, paragraful p este afișat în text negru.
În CSS există diferite modalități de a defini stiluri. Acesta este și motivul pentru care unui element i se pot da instrucțiuni contradictorii. Pentru astfel de situații, CSS are un principiu de ponderare. Acest principiu stabilește clar care dintre instrucțiunile pentru un element au prioritate. Nu vreau să intru în detalii la acest nivel, dar puteți găsi informații detaliate despre acest lucru pe site-urile http://wiki.selfhtml.org/wiki/CSS/Kaskade sau http://www.thestyleworks.de/basics/cascade.shtml.
Ceea ce vreau să subliniez este să fiți atenți atunci când definiți proprietățile CSS. Acest lucru este ilustrat de exemplul următor:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC;
}
h2 strong {
color: red;
}
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Acesta este un paragraf cu un <strong>cuvânt gras</strong>.</p>
<h2>Acesta este un antet cu un <strong>cuvânt gras</strong>.</h2>
</div>
</body>
</html>În browser, arată astfel:
După cum vedeți, cuvintele marcate cu strong sunt formatate diferit. Care formatare este aplicată depinde în cele din urmă de ordinea definițiilor.
Ca alternativă, există și cuvântul cheie !important, prin care puteți marca o instrucțiune CSS ca fiind deosebit de importantă.
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC !important;
}
h2 strong {
color: red;
}
</style>Iată și aici un scurt rezumat al rezultatului:
Citiți cu atenție sursele menționate în acest tutorial. (Chiar dacă la început nu trebuie să intrați prea adânc în această temă).
