CSS handleiding

CSS TUIS CSS Inleiding CSS-sintaksis CSS-keurders CSS Hoe om CSS Kommentaar CSS kleure CSS agtergronde CSS-grense CSS-marges CSS Opvulling CSS Hoogte/Breedte CSS Box Model CSS uiteensetting CSS teks CSS lettertipes CSS-ikone CSS skakels CSS-lyste CSS-tabelle CSS vertoon CSS maksimum breedte CSS posisie CSS Z-indeks CSS oorloop CSS Float CSS Inline-blok CSS Belyn CSS-kombineerders CSS Pseudo-klas CSS Pseudo-element CSS Deursigtigheid CSS-navigasiebalk CSS-aftrekkies CSS Beeldgalery CSS Beeld Sprites CSS Attr keurders CSS-vorms CSS-tellers CSS-webwerfuitleg CSS-eenhede CSS Spesifisiteit CSS !belangrik CSS Wiskunde funksies

CSS Gevorderd

CSS afgeronde hoeke CSS-randbeelde CSS agtergronde CSS kleure CSS-kleur sleutelwoorde CSS Gradiënte CSS Shadows CSS-tekseffekte CSS Web Fonts CSS 2D-transformasies CSS 3D-transformasies CSS-oorgange CSS-animasies CSS Tooltips CSS-stylbeelde CSS-beeldrefleksie CSS-objekpas CSS voorwerp-posisie CSS-maskering CSS-knoppies CSS-paginering CSS veelvuldige kolomme CSS-gebruikerskoppelvlak CSS veranderlikes CSS-boksgrootte CSS-medianavrae CSS MQ Voorbeelde CSS Flexbox

CSS reageer

RWD Inleiding RWD Uitsigpoort RWD-roosteraansig RWD Media Navrae RWD beelde RWD-video's RWD-raamwerke RWD-sjablone

CSS -rooster

Grid Intro Roosterhouer Rooster item

CSS SASS

SASS Tutoriaal

CSS voorbeelde

CSS-sjablone CSS voorbeelde css vasvra CSS Oefeninge CSS-sertifikaat

CSS Verwysings

CSS Verwysing CSS-keurders CSS-funksies CSS Verwysing Gehoor CSS Web veilige lettertipes CSS Animateerbaar CSS-eenhede CSS PX-EM-omskakelaar CSS kleure CSS-kleurwaardes CSS verstekwaardes CSS-blaaierondersteuning

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-linepseudo-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-linepseudo-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-letterpseudo-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-letterpseudo-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 ::beforepseudo-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 ::afterpseudo-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 ::markerpseudo-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 ::selectionpseudo-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;
}

Toets jouself met oefeninge

Oefening:

Stel die agtergrondkleur op rooi, van die eerste reël van die paragraaf.

<style>
 {
  background-color: red;
}
</style>

<body>

<p class="intro">
In my younger and more vulnerable years
my father gave me some advice that I've
been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me,
'just remember that all the people in this world
haven't had the advantages that you've had.'
</p>

</body>


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