counter()
- Data publikacji
- Ostatnio edytowano
Przeznaczenie funkcji counter()
Za pomocą funkcji counter() możemy odwołać się do wartości posiadanej przez interesujący nas licznik.
Parametry funkcji counter()
- Przykładowe zapisy
-
counter(licznik)counter(licznik-1)counter(licznik-1, upper-roman)
- name
-
Parametr
namejest wymaganym parametrem funkcjicounter(). Parametrnamewskazuje na nazwę licznika, do którego wartości chcemy się odwołać. - type
-
Parametr
typenie jest wymaganym parametrem funkcjicounter(). Parametrtypeokreśla typ dla wartości posiadanej przez licznik.
Występowanie funkcji counter()
Przykład funkcji counter()
content:counter(licznik-1, upper-roman) ' - ';
Do początkowej zawartości każdego z przykładowych elementów "div" został dodany dodatkowy pseudoelement "::before" wraz z dodatkową treścią w postaci wartości typu "upper-roman" posiadanej przez licznik o nazwie "licznik-1", ponieważ do wspomnianych elementów "div" (między innymi za pomocą selektora "::before") została dodana właściwość "content" wraz z kombinacją wartości zawierającą między innymi funkcję "counter()", w której to funkcji zostały użyte następujące wartości: "licznik-1, upper-roman".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
figure {
counter-reset:licznik-1;
margin:0;
padding-left:1em;
border-left:2px solid black;
font-size:1.2em;
}
figure > div::before {
content:counter(licznik-1, upper-roman) ' - ';
counter-increment:licznik-1;
color:blue;
}
</style>
</head>
<body>
<figure>
<div>przykładowy element "div"</div>
<div>przykładowy element "div"</div>
<div>przykładowy element "div"</div>
<div>przykładowy element "div"</div>
<div>przykładowy element "div"</div>
</figure>
</body>
</html>Interpretacja funkcji counter()
-
tak
-
tak
-
tak
-
tak
-
tak
-
tak