CSS pseudo elementi : CSS Pseudo Elements

Ova svojstva se ne nasljeđuju od roditelja na potomke.

Sintaksa : Syntax

Sintaksa za pseudo elemente se nešto razlikuje u odnosu na uobičajeni kod CSS-a.

Obrazac je:

selector:pseudo-element {
	svojstvo: vrijednost;
}

Koristeći navedeni obrazac možemo dodijeliti slijedeće pseudo elemente:

  • first-line
  • first-letter

Pseudo element možemo dodijeliti i elementima željene klase (u ovom donjem odlomku klase 'oznaka'):

p.oznaka:pseudo-element {
	svojstvo: vrijednost;
}

Web dizajn elementi!

Prvi redak : First Line

Pseudo element first-line određuje svojstva prvog retka u tekstu blok elementa.

Primjer:

p {
	font-size: small;
}
p:first-line {
	font-size: medium;
	color: green;
}

Gornji primjer zadaje malu veličinu slova teksta svih odlomaka. Pomoću p:first-line zadajemo da je prvi redak u svim odlomcima ispisan srednjom veličinom slova zelene boje.

Slijedeća svojstva mogu biti dodijeljena pseudo elementu first-line:

  • background
  • clear
  • color
  • font
  • letter-spacing
  • line-height
  • text-decoration
  • text-transform
  • vertical-align
  • word-spacing

Prvo slovo : First Letter

Pseudo element first-letter određuje svojstva prvog slova u tekstu blok elementa.

Primjer:

p {
	font-size: small;
}
p:first-letter {
	font-size: medium;
	color: red;
}

Gornji primjer zadaje malu veličinu slova u svim odlomcima. Pomoću pseudo elementa first-letter: zadajemo da je prvo slovo u svim odlomcima ispisano srednjom veličinom slova crvene boje.

Slijedeća svojstva mogu biti dodijeljena pseudo elementu

Slijedeća svojstva mogu biti dodijeljena pseudo elementu first-letter:

    • background
    • clear
    • color
    • float
    • font
    • line-height
    • margin
    • padding
    • text-decoration
    • text-transform
    • word-spacing