CSS Pseudo-elemente
Wat is Pseudo-elemente?
'n CSS pseudo-element word gebruik om gespesifiseerde dele van 'n element te styl.
Dit kan byvoorbeeld gebruik word om:
- Stileer die eerste letter, of reël, van 'n element
- Voeg inhoud voor of na die inhoud van 'n element in
Sintaksis
Die sintaksis van pseudo-elemente:
selector::pseudo-element {
property: value;
}
Die ::eerste-lyn Pseudo-element
Die ::first-line
pseudo-element word gebruik om 'n spesiale styl by die eerste reël van 'n teks te voeg.
Die volgende voorbeeld formateer die eerste reël van die teks in alle <p>-elemente:
Voorbeeld
p::first-line
{
color: #ff0000;
font-variant: small-caps;
}
Let wel: Die ::first-line
pseudo-element kan slegs op blokvlak-elemente toegepas word.
Die volgende eienskappe is van toepassing op die ::first-line
pseudo-element:
- lettertipe eienskappe
- kleur eienskappe
- agtergrond eienskappe
- woordspasiëring
- letterspasiëring
- teksversiering
- vertikaal in lyn
- teks-transformasie
- lyn hoogte
- duidelik
Let op die dubbeldubbelpunt-notasie - ::first-line
teenoor
:first-line
Die dubbeldubbelpunt het die enkeldubbelpunt-notasie vir pseudo-elemente in CSS3 vervang. Dit was 'n poging van W3C om tussen pseudo-klasse
en pseudo-elemente te onderskei .
Die enkel-dubbelpunt sintaksis is gebruik vir beide pseudo-klasse en pseudo-elemente in CSS2 en CSS1.
Vir terugwaartse versoenbaarheid is die enkeldubbelpunt-sintaksis aanvaarbaar vir CSS2 en CSS1 pseudo-elemente.
Die ::eerste-letter Pseudo-element
Die ::first-letter
pseudo-element word gebruik om 'n spesiale styl by die eerste letter van 'n teks te voeg.
Die volgende voorbeeld formateer die eerste letter van die teks in alle <p>-elemente:
Voorbeeld
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
Let wel: Die ::first-letter
pseudo-element kan slegs op blokvlak-elemente toegepas word.
Die volgende eienskappe is van toepassing op die ::eersteletter pseudo-element:
- lettertipe eienskappe
- kleur eienskappe
- agtergrond eienskappe
- marge eienskappe
- vulling eienskappe
- grens eiendomme
- teksversiering
- vertikaal-belyn (slegs as "float" "geen" is)
- teks-transformasie
- lyn hoogte
- dryf
- duidelik
Pseudo-elemente en HTML-klasse
Pseudo-elemente kan gekombineer word met HTML-klasse:
Voorbeeld
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
Die voorbeeld hierbo sal die eerste letter van paragrawe met class="intro", in rooi en in 'n groter grootte vertoon.
Veelvuldige Pseudo-elemente
Verskeie pseudo-elemente kan ook gekombineer word.
In die volgende voorbeeld sal die eerste letter van 'n paragraaf rooi wees, in 'n xx-groot lettergrootte. Die res van die eerste reël sal blou wees, en in klein-kappies. Die res van die paragraaf sal die versteklettergrootte en -kleur wees:
Voorbeeld
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
}
CSS - Die ::before Pseudo-element
Die ::before
pseudo-element kan gebruik word om sekere inhoud voor die inhoud van 'n element in te voeg.
Die volgende voorbeeld voeg 'n prent voor die inhoud van elke <h1>-element in:
Voorbeeld
h1::before
{
content: url(smiley.gif);
}
CSS - Die ::after Pseudo-element
Die ::after
pseudo-element kan gebruik word om sekere inhoud na die inhoud van 'n element in te voeg.
Die volgende voorbeeld voeg 'n prent na die inhoud van elke <h1>-element in:
Voorbeeld
h1::after
{
content: url(smiley.gif);
}
CSS - Die ::merker Pseudo-element
Die ::marker
pseudo-element kies die merkers van lysitems.
Die volgende voorbeeld styl die merkers van lysitems:
Voorbeeld
::marker {
color: red;
font-size: 23px;
}
CSS - Die ::seleksie Pseudo-element
Die ::selection
pseudo-element pas by die gedeelte van 'n element wat deur 'n gebruiker gekies word.
Die volgende CSS-eienskappe kan toegepas word op ::selection
:
color
,
background
, cursor
, en outline
.
Die volgende voorbeeld maak die geselekteerde teks rooi op 'n geel agtergrond:
Voorbeeld
::selection {
color: red;
background: yellow;
}
Alle CSS Pseudo Elemente
Selector | Example | Example description |
---|---|---|
::after | p::after | Insert something after the content of each <p> element |
::before | p::before | Insert something before the content of each <p> element |
::first-letter | p::first-letter | Selects the first letter of each <p> element |
::first-line | p::first-line | Selects the first line of each <p> element |
::marker | ::marker | Selects the markers of list items |
::selection | p::selection | Selects the portion of an element that is selected by a user |
Alle CSS Pseudo-klasse
Selector | Example | Example description |
---|---|---|
:active | a:active | Selects the active link |
:checked | input:checked | Selects every checked <input> element |
:disabled | input:disabled | Selects every disabled <input> element |
:empty | p:empty | Selects every <p> element that has no children |
:enabled | input:enabled | Selects every enabled <input> element |
:first-child | p:first-child | Selects every <p> elements that is the first child of its parent |
:first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element of its parent |
:focus | input:focus | Selects the <input> element that has focus |
:hover | a:hover | Selects links on mouse over |
:in-range | input:in-range | Selects <input> elements with a value within a specified range |
:invalid | input:invalid | Selects all <input> elements with an invalid value |
:lang(language) | p:lang(it) | Selects every <p> element with a lang attribute value starting with "it" |
:last-child | p:last-child | Selects every <p> elements that is the last child of its parent |
:last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent |
:link | a:link | Selects all unvisited links |
:not(selector) | :not(p) | Selects every element that is not a <p> element |
:nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent |
:nth-last-child(n) | p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child |
:nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every <p> element that is the second <p> element of its parent, counting from the last child |
:nth-of-type(n) | p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent |
:only-of-type | p:only-of-type | Selects every <p> element that is the only <p> element of its parent |
:only-child | p:only-child | Selects every <p> element that is the only child of its parent |
:optional | input:optional | Selects <input> elements with no "required" attribute |
:out-of-range | input:out-of-range | Selects <input> elements with a value outside a specified range |
:read-only | input:read-only | Selects <input> elements with a "readonly" attribute specified |
:read-write | input:read-write | Selects <input> elements with no "readonly" attribute |
:required | input:required | Selects <input> elements with a "required" attribute specified |
:root | root | Selects the document's root element |
:target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
:valid | input:valid | Selects all <input> elements with a valid value |
:visited | a:visited | Selects all visited links |