CSS counter-set ominaisuus

Määrittely ja käyttö

counter-set Ominaisuus käytetään CSS-laskurin luomiseen ja asettamaan se tiettyyn arvoon.

counter-set Ominaisuudet käytetään yleensä yhdessä counter-increment-ominaisuuden ja content-ominaisuuuden kanssa.

Esimerkki

Esimerkki 1

Luo laskuri ("minun-laskurini"), aseta se arvoksi 5 ja lisää sitä 1 kerran joka kerta, kun <h2> -valitsin ilmestyy:

body {
  /* Aseta "minun-laskurini" arvoksi 5 */
  counter-set: minun-laskurini 5;
}
h2::before {
  /* Lisää "my-counter" 1 */
  counter-increment: my-counter;
  content: "Luku " counter(minun-laskurini) ". ";
}

Kokeile itse

Esimerkki 2

Luo laskuri ("minun-laskurini"), aseta se arvoksi 5 ja vähennä sitä 1 kerran joka kerta, kun <h2> -valitsin ilmestyy:

body {
  /* Aseta "minun-laskurini" arvoksi 5 */
  counter-set: minun-laskurini 5;
}
h2::before {
  /* Vähennä "minun-laskurini" 1 */
  counter-increment: minun-laskurini -1;
  content: "Luku " counter(minun-laskurini) ". ";
}

Kokeile itse

Esimerkki 3

Käytä "Luku 10:"、"10.1"、"10.2" -muotoja luku- ja alalukunumeroille:

body {
  /* Aseta "luku" arvoksi 9 */
  counter-set: luku 9;
}
h1 {
  /* Aseta "subsection" arvoon 0 */
  counter-set: subsection 0;
}
h1::before {
  /* Lisää "section" 1 */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
h2::before {
  /* Lisää "subsection" 1 */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Kokeile itse

Esimerkki 4

Luo laskuri, aseta se arvoon 9 ja lisää se 1 kerran <h2>-valitsimen esiintymisessä (romaanin numeroina):

body {
  /* Aseta "my-counter" arvoon 9 */
  counter-set: my-counter 9;
}
h2::before {
  /* Lisää "my-counter" 1 */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

Kokeile itse

CSS-kieli

counter-set: none|counter-name number|initial|inherit;

Ominaisuuden arvo

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee kyseistä ominaisuutta täysin.

Liittyvät sivut

Viittaus:::before väliaikainen elementti

Viittaus:::after väliaikainen elementti

Viittaus:CSS content ominaisuus

Viittaus:CSS counter-increment ominaisuus

Viittaus:CSS counter() funktio