Dacă o pseudo-clasă este folosită pentru a defini trăsături speciale ale unui element, un pseudo-element CSS este folosit pentru a particulariza părțile specifice ale unui element. Pe de altă parte un selector este folosit pentru a selecta elemente cu un atribut specificat. Un combinator este ceva statuează relația dintre selectori.
nth-child
:nth-child() – pseudo-clasă care selectează elementul de acelaşi tip, în funcţie de numărul dintre paranteze.
|
1 |
td:nth-child(2) /* formatează a doua celulă a rândului */ |
nth-last-child
:nth-last-child() – pseudo-clasă care selectează un element de acelaşi tip, de la sfârşit spre început, ultimul având valoarea 1, penultimul 2 etc.
|
1 |
td:nth-last-child(2) /* formatează penultima celulă a rândului */ |
only-child
:only-child – pseudo-clasă care selectează elementul menţionat, doar dacă este inclus în alt tip de element.
|
1 2 3 4 5 |
<style> p:only-child {color: red;} </style> <div><p>Lorem ipsum</p></div> <!-- Formatează--> <p>Lorem ipsum</p><!-- Ignoră --> |
target
:target – pseudo-clasă care evidențiază ancora HTML activă. Exemplul de mai jos va crea, într-o manieră rapidă, tab-uri..
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> div.tab div {display: none;} div.tab div:target {display: block;} </style> <div class="tab"> <a href="#ref1">Tab 1</a> | <a href="#ref2">Tab 2</a> | <a href="#ref3">Tab 3</a> <div id="ref1"> <h2>Tabul 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div id="ref2"> <h2>Tabul 2</h2> <p>Curabitur tincidunt lacus eget tincidunt tempus</p> </div> <div id="ref3"> <h2>Tabul 3</h2> <p>Donec commodo massa metus, non fermentum mi ultricies sit amet.</p> </div> </div> |
Exemplificare
Tabul 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Tabul 2
Curabitur tincidunt lacus eget tincidunt tempus
Tabul 3
Donec commodo massa metus, non fermentum mi ultricies sit amet.
[attribute=”value”]
[attribute^=value] – (selector) selectează atributul (id, class) a cărei valoare începe cu un text anume
|
1 2 3 4 5 6 7 |
<style> div[id^="test"] {background: orange;} </style> <div id="test1">Acest continut va fi evidentiat.</div> <div>Acest continut nu va fi evidentiat.</div> <div id="test2">Si acest continut va fi evidentiat.</div> <div>Nici acest continut nu va fi evidentiat.</div> |
Exemplificare
marker
::marker – pseudo-element care selectează caseta de marcare a unui element din listă, care de obicei conține un bullet sau un număr.
Exemplificare
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<style> .marker ::marker { color: coral; font-size: 1.25em; line-height:1; } .marker_tip ::marker { content: '\00BB'' '; margin:0 15px; padding: 0 15px; color: blue; font-weight:bold; font-size: 1.2em; line-height:.75; } </style> <ol class="marker"> <li>Linia 1</li> <li>Linia 2</li> <li>Linia 3</li> </ol> <ul class="marker"> <li>Linia 1</li> <li>Linia 2</li> <li>Linia 3</li> </ul> <ul class="marker_tip"> <li>Linia 1</li> <li>Linia 2</li> <li>Linia 3</li> </ul> |
Rezultat
- Linia 1
- Linia 2
- Linia 3
- Linia 1
- Linia 2
- Linia 3
- Linia 1
- Linia 2
- Linia 3
Combinatori.
- selector descendent (spațiu) – se potrivește cu toate elementele care sunt descendenți ai unui element specificat
- selector de copii (>) – selectează toate elementele care sunt copii ale unui element specificat
- selector de frați adiacenţi (+) – selectează un element care se află direct după un alt element specific.
- selector general de frați (~) – selectează toate elementele care sunt următorii frați ai unui element specificat.
a) Exemplificare
|
1 2 3 4 5 6 7 8 9 10 |
<style> div.descend span.descend { background-color: orange; } </style> <div class="descend"> <p><span class="descend">Format aplicabil</span></p> <div><span class="descend">Format aplicabil</span></div> </div> <p><span class="descend">Format neaplicabil</span></p> |
Rezultat
Format neaplicabil
b) Exemplificare
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> div.child > span.child { background-color: orange; } </style> <div class="child"> <span class="child">Format aplicabil</span> <p><span class="child">Format neaplicabil</span></p> <span class="child">Format aplicabil</span> </div> <span class="child">Format neaplicabil</span> |
Rezultat
Format neaplicabil
Format aplicabil.
Format neaplicabil.
Format neaplicabil
Format neaplicabil
Format aplicabil
Format neaplicabil
c) Exemplificare
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> div.sibling + p.sibling { background-color: yellow; } </style> <p>Format neaplicabil</p> <div class="sibling"> <p class="sibling">Format neaplicabil</p> </div> <p class="sibling">Format aplicabil</p> <p class="sibling">Format neaplicabil</p> <div class="sibling"> <p class="sibling">Format neaplicabil</p> </div> <p class="sibling">Format aplicabil</p> <p class="sibling">Format neaplicabil</p> |
Rezultat
Format neaplicabil
Format neaplicabil
Format aplicabil
Format neaplicabil
Format neaplicabil
Format aplicabil
Format neaplicabil
d) Exemplificare
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> div.gen_sibl ~ p.gen_sibl { background-color: orange; } </style> </head> <body> <p class="gen_sibl">Format neaplicabil</p> <div class="gen_sibl"><p class="gen_sibl">Format neaplicabil</p></div> <p class="gen_sibl">Format aplicabil</p> <span class="gen_sibl">Format neaplicabil</span> <p class="gen_sibl">Format aplicabil</p> |
Rezultat
Format neaplicabil
Format neaplicabil
Format aplicabil
Format neaplicabil
Format aplicabil
-
- A se vedea şi articolul Tab-uri CSS pentru alte modalităţi de a realiza tab-uri într-o manieră uşoară.
- W3Schools.com
