12 Treść generowana, numerowanie automatyczne oraz listy

Czasami konieczne jest wygenerowanie treści nie pochodzącej z drzewa dokumentu. Jedną z takich sytuacji jest tworzenie listy numerowanej. Autor nie wpisuje numerów bezpośrednio — są one generowane automatycznie przez aplikację kliencką. Analogicznie można spowodować wstawianie przez aplikację kliencką słowa "Rysunek" przed podpisem rysunku albo słowa "Rozdział 7" przed tytułem siódmego rozdziału. Aplikacje klienckie powinny w szczególności potrafić wstawiać takie łańcuchy w kontekstach audio i Braille’a.

W CSS 2.1 są dwa mechanizmy umożliwiające generowanie treści:

• Własność ‚content’ w połączeniu z pseudoelementami :before i :after.
• Elementy z własnością ‚display’ ustawioną na ‚list-item’.

12.1 Pseudoelementy :before i :after

Styl i miejsce występowania treści generowanej określa się za pomocą pseudoelementów :before i :after. Jak ich nazwy wskazują, pseudoelementy te określają położenie treści przed (:before) i za (:after) treścią elementu w drzewie dokumentu. Własność ‚content’ służy do określania treści, którą te pseudoelementy mają wstawić.

p.note:before { content: "Uwaga: " }

Treść generowana jest zaliczana do treści obiektu formatującego (np. pola) wygenerowanego przez element. Zmienimy powyższy arkusz stylów w następujący sposób:

Modyfikacja ta spowoduje pojawienie się zielonego obramowania wokół całego akapitu, włącznie z pierwszym łańcuchem.

Pseudoelementy :before i :after dziedziczą wszystkie dziedziczne własności po elemencie z drzewa dokumentu, do którego są dołączone.

q:before {
  content: open-quote;
  color: red
}

Własności niedziedziczne w deklaracjach pseudoelementów :before i :after przyjmują wartości początkowe.

body:after {
    content: "Koniec";
    display: block;
    margin-top: 2em;
    text-align: center;
}

Pseudoelementy :before i :after oddziałują wzajemnie z innymi polami, np. typu ‚run-in’, tak, jakby były prawdziwymi elementami wstawionymi wewnątrz elementów, z którymi są związane.

<h2> Nagłówek </h2>             h2 { display: run-in; }
<p> Tekst </p>                  p:before { display: block; content: 'Jakiś'; }

<h2> Nagłówek </h2>          h2 { display: run-in; }
<p><span>Jakiś</span> Tekst </p>  span { display: block }

<h2> Nagłówek </h2>   h2 { display: run-in; }
                      h2:after { display: block; content: 'Rzecz'; }
<p> Tekst </p>

<h2> Nagłówek <span>Rzecz</span></h2> h2 { display: block; }
                                      span { display: block; }
<p> Tekst </p>

12.2 Własność ‚content’

Własność ta w połączeniu z pseudoelementami :before i :after służy do generowania treści w dokumencie. Opis wartości:

none

Pseudoelement nie jest generowany.

normal

Dla pseudoelementów :before i :after zostaje zamieniona na ‚none’.

<string>

Treść tekstowa (zobacz podrozdział o łańcuchach).

<uri>

Identyfikator URI wskazujący zasób zewnętrzny (np. obraz). Jeśli aplikacja kliencka nie może wyświetlić zasobu, musi zachować się tak, jakby zasób ten w ogóle nie został określony lub wyświetlić jakiś znak informujący, że nie można wyświetlić zasobu.

<counter>

Liczniki można określać za pomocą dwóch funkcji: ‚counter()’ i ‚counters()’. Pierwsza z nich ma dwie postaci: ‚counter(nazwa)’ i ‚counter(nazwa, styl)’. Wygenerowany tekst jest wartością najgłębiej zagnieżdżonego licznika o danej nazwie w zakresie w tym pseudoelemencie. Jego formatowanie określa podany styl (domyślnie ‚decimal’). Druga funkcja również ma dwie postaci: ‚counters(nazwa, łańcuch)’ i ‚counters(nazwa, łańcuch, styl)’. Wygenerowany tekst jest wartością wszystkich liczników o danej nazwie w zakresie w tym pseudoelemencie, od najpłycej do najgłębiej zagnieżdżonego, oddzielone podanym łańcuchem. Formatowanie tych liczników określa zdefiniowany styl (domyślnie ‚decimal’). Aby uzyskać szczegółowe informacje, zobacz podrozdział o automatycznych licznikach i numerowaniu. Nazwą nie może być ‚none’, ‚inherit’ ani ‚initial’. Deklaracje z tymi nazwami są ignorowane.

open-quote i close-quote

Wartości te są zastępowane odpowiednim łańcuchem pobranym z własności ‚quotes’.

no-open-quote i no-close-quote

Nie dodaje żadnej treści, ale zwiększa (lub zmniejsza) poziom zagnieżdżenia cudzysłowów.

attr(X)

Funkcja zwracająca jako łańcuch wartość atrybutu X przedmiotu selektora. Łańcuch ten nie jest przetwarzany przez procesor CSS. Jeśli przedmiot selektora nie ma atrybutu X, zostanie zwrócony pusty łańcuch. To, czy w nazwach atrybutów są rozróżniane małe i wielkie litery zależy od języka dokumentu.

Za pomocą własności ‚display’ można określić czy treść ma zostać zaprezentowana w polu blokowym, czy śródliniowym.

H1:before {
  content: "Rozdział: ";
  display: inline;
}

Aby w generowanej treści uzyskać przejście do nowego wiersza, można użyć sekwencji specjalnej "A" w jednym z łańcuchów własności ‚content’. Tak wstawione złamanie wiersza nadal podlega własności ‚white-space’. Aby uzyskać dodatkowe informacje na temat sekwencji specjalnej "A", zobacz "Łańcuchy" oraz "Litery i wielkość liter".

h1:before {
    display: block;
    text-align: center;
    white-space: pre;
    content: "rozdziałA hoofdstukA chapitre"
}

Treść generowana nie modyfikuje drzewa dokumentu. W szczególności nie jest zwracana do procesora języka dokumentu (np. w celu przeprowadzenia ponownej analizy składniowej).

12.3 Cudzysłowy

W CSS 2.1 istnieje możliwość określenia sposobu (zależnie od stylu i kontekstu) prezentowania przez aplikacje klienckie cudzysłowów. Własność ‚quotes’ służy do określania cudzysłowów na wszystkich poziomach zagnieżdżenia. Dostęp do tych cudzysłowów można uzyskać za pomocą własności ‚content’, która umożliwia wstawienie ich przed i za cytatem.

12.3.1 Określanie cudzysłowów za pomocą własności ‚quotes’

Własność ta służy do określania cudzysłowów dla dowolnej liczby zagnieżdżonych cytatów. Opis wartości:

none

Wartości ‚open-quote’ i ‚close-quote’ własności ‚content’ nie tworzą żadnych cudzysłowów.

[<string>  <string>]+

Wartości ‚open-quote’ i ‚close-quote’ własności ‚content’ są pobierane z tej listy par cudzysłowów (otwierających i zamykających). Pierwsza (z lewej) para reprezentuje podstawowy poziom cytowania, druga para to pierwszy poziom itd. Aplikacja kliencka musi wstawiać odpowiednie cudzysłowy w zależności od poziomu zagnieżdżenia.

<HTML lang="en">
  <HEAD>
  <TITLE>Cytaty</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Zacytuj mnie!</Q>
  </BODY>
</HTML>

"Zacytuj mnie!"

<HTML lang="no">
  <HEAD>
  <TITLE>Quotes</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q> blir deklamert.</Q>
  </BODY>
</HTML>

?Tr?ndere gr?ter n?r "Vinsjan p? kaia" blir deklamert.?

12.3.2 Wstawianie cudzysłowów za pomocą własności ‚content’

Cudzysłowy wstawiane są w odpowiednich miejscach w dokumencie za pomocą wartości ‚open-quote’ i ‚close-quote’ własności ‚content’. Każde wystąpienie wartości ‚open-quote’ lub ‚close-quote’ jest zastępowane przez jeden łańcuch z wartości własności ‚quotes’ zgodnie z poziomem zagnieżdżenia.

Wartość ‚open-quote’ określa pierwszy znak z pary cudzysłowów, a ‚close-quote’ — drugi. To, która para cudzysłowów zostanie użyta, zależy od poziomu zagnieżdżenia cytatów: liczba wystąpień wartości ‚open-quote’ w całym dotychczas wygenerowanym tekście minus liczba wystąpień wartości ‚close-quote’. Jeśli głębokość wynosi 0, zostanie użyta pierwsza para, jeśli — 1, zostanie użyta druga para itd. Jeśli głębokość zagnieżdżenia jest większa od liczby par, zostanie użyta ostatnia para. Wartości ‚close-quote’ i ‚no-close-quote’, które powodują powstanie ujemnego poziomu zagnieżdżenia są błędne i ignorowane (w czasie prezentowania treści): poziom zagnieżdżenia pozostaje 0 i nie zostaje wygenerowany żaden cudzysłów (ale pozostała część wartości ‚content’ zostanie wstawiona).

W niektórych stylach poligraficznych cudzysłów otwierający musi zostać powtórzony przed każdym akapitem cytatu obejmującego kilka akapitów, a cudzysłów zamykający powinien znajdować się tylko na końcu ostatniego akapitu. W CSS efekt taki można uzyskać przy użyciu "fikcyjnych" cudzysłowów zamykających. Słowo kluczowe ‚no-close-quote’ zmniejsza poziom zagnieżdżenia cytatu, ale nie wstawia cudzysłowu.

blockquote p:before     { content: open-quote }
blockquote p:after      { content: no-close-quote }
blockquote p.last:after { content: close-quote }

Dla zachowania symetrii istnieje też słowo kluczowe ‚no-open-quote’, które nic nie wstawia, ale zwiększa poziom zagnieżdżenia cudzysłowów o jeden.

12.4 Automatyczne liczniki i numerowanie

W CSS 2.1 do kontrolowania numerowania automatycznego służą dwie własności: ‚counter-increment’ i ‚counter-reset’. Liczniki zdefiniowane przez te własności są używane z funkcjami counter() i counters() własności ‚content’.

Własność ‚counter-increment’ przyjmuje jedną lub więcej nazw liczników (identyfikatorów), po każdym z których może znajdować się liczba całkowita. Liczba ta określa o ile licznik ma zostać zwiększony przy każdym wystąpieniu elementu. Domyślna wartość to 1. Dozwolone są także wartości ujemne i zero.

Własność ‚counter-reset’ również zawiera listę nazw liczników, po każdym z których może znajdować się liczba całkowita. Liczba ta określa wartość, na jaką licznik zostaje ustawiony przy każdym wystąpieniu elementu. Domyślna wartość to 0.

Jako nazw liczników nie można używać słów kluczowych ‚none’, ‚inherit’ oraz ‚initial’. Sama wartość ‚none’ oznacza, że żadne liczniki nie są resetowane (ani zwiększane). Wartość ‚inherit’ sama w sobie ma swoje typowe znaczenie (zobacz 6.2.1). Wartość ‚initial’ została zarezerwowana na przyszłość.

BODY {
    counter-reset: chapter;      /* Tworzy zakres licznika rozdziałów */
}
H1:before {
    content: "Rozdział " counter(chapter) ". ";
    counter-increment: chapter;  /* Dodaje 1 do chapter */
}
H1 {
    counter-reset: section;      /* Ustawia podrozdział na 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

Jeśli element zwiększa lub zeruje licznik i jednocześnie go używa (we własności ‚content’ swoich pseudoelementów :before i :after), licznik zostaje użyty po zwiększeniu lub wyzerowaniu.

Jeśli element jednocześnie zeruje i zwiększa licznik, najpierw wykonywane jest zerowanie.

Jeśli jeden licznik zostanie określony w wartościach własności ‚counter-reset’ i ‚counter-increment’ więcej niż raz, każde jego zerowanie/zwiększanie jest wykonywane w kolejności określenia.

H1 { counter-reset: section 2 section }

H1 { counter-increment: chapter chapter 2 }

Własność ‚counter-reset’ przestrzega zasad kaskadowości. W związku z tym, ze względu na te zasady poniższy arkusz stylów:

wyzeruje tylko ‚imagenum’. Aby oba liczniki zostały wyzerowane, muszą one zostać określone razem:

12.4.1 Liczniki zagnieżdżone i zakres

Liczniki "same się zagnieżdżają", tzn. wyzerowanie licznika w elemencie potomnym lub pseudoelemencie powoduje automatyczne utworzenie nowego egzemplarza tego licznika. Jest to ważne np. w listach HTML, gdzie elementy mogą być zagnieżdżane na dowolną głębokość. Zdefiniowanie niepowtarzalnych nazw liczników dla wszystkich poziomów byłoby niemożliwe.

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }

Zakres licznika zaczyna się od pierwszego elementu w dokumencie, który ma własność ‚counter-reset’ dla tego licznika i obejmuje potomków tego elementu oraz znajdujących się za nim braci wraz z ich potomkami. Nie obejmuje natomiast elementów znajdujących się w zakresie licznika o tej samej nazwie utworzonego przez własność ‚counter-reset’ dalszego brata tego elementu lub dalszą własność ‚counter-reset’ tego samego elementu.

Jeśli własności ‚counter-increment’ lub ‚content’ elementu lub pseudoelementu odnoszą się do licznika nie znajdującego się w zakresie żadnej własności ‚counter-reset’, implementacje powinny zachowywać się tak, jakby licznik ten został zresetowany przez własność ‚counter-reset’ tego elementu lub pseudoelementu do 0.

W powyższym przykładzie element OL utworzy licznik, a wszystkie jego dzieci potomne będą się do niego odnosić.

<OL>                    <!-- {item[0]=0        -->
  <LI>item</LI>         <!--  item[0]++ (=1)   -->
  <LI>item              <!--  item[0]++ (=2)   -->
    <OL>                <!--  {item[1]=0       -->
      <LI>item</LI>     <!--   item[1]++ (=1)  -->
      <LI>item</LI>     <!--   item[1]++ (=2)  -->
      <LI>item          <!--   item[1]++ (=3)  -->
        <OL>            <!--   {item[2]=0      -->
          <LI>item</LI> <!--    item[2]++ (=1) -->
        </OL>           <!--                   -->
        <OL>            <!--   }{item[2]=0     -->
          <LI>item</LI> <!--    item[2]++ (=1) -->
        </OL>           <!--                   -->
      </LI>             <!--   }               -->
      <LI>item</LI>     <!--   item[1]++ (=4)  -->
    </OL>               <!--                   -->
  </LI>                 <!--  }                -->
  <LI>item</LI>         <!--  item[0]++ (=3)   -->
  <LI>item</LI>         <!--  item[0]++ (=4)   -->
</OL>                   <!--                   -->
<OL>                    <!-- }{item[0]=0       -->
  <LI>item</LI>         <!--  item[0]++ (=1)   -->
  <LI>item</LI>         <!--  item[0]++ (=2)   -->
</OL>                   <!--                   -->

                     <!--"chapter" counter|"section" counter -->
<body>               <!-- {chapter=0      |                  -->
  <h1>About CSS</h1> <!--  chapter++ (=1) | {section=0       -->
  <h2>CSS 2</h2>     <!--                 |  section++ (=1)  -->
  <h2>CSS 2.1</h2>   <!--                 |  section++ (=2)  -->
  <h1>Style</h1>     <!--  chapter++ (=2) |}{ section=0      -->
</body>              <!--                 | }                -->

Funkcja ‚counters()’ generuje łańcuch składający się z wszystkich liczników o tej samej nazwie, które znajdują się w zakresie. Poszczególne wartości są oddzielone od siebie podanym łańcuchem znaków.

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

12.4.2 Style liczników

Domyślnie liczniki są formatowane jako liczby dziesiętne, ale można to zmienić za pomocą dowolnej wartości własności ‚list-style-type’. Notacja jest następująca:

licznik(nazwa)

dla stylu domyślnego lub:

counter(nazwa, <'list-style-type'>)

Dozwolone jest używanie wszystkich stylów, takich jak np. ‚disc’, ‚circle’, ‚square’ oraz ‚none’.

H1:before        { content: counter(chno, upper-latin) ". " }
H2:before        { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, lower-greek) "]" }
DIV.note:before  { content: counter(notecntr, disc) " " }
P:before         { content: counter(p, none) }

12.4.3 Liczniki w elementach z ustawieniem własności ‚display: none’

Element, który nie jest wyświetlany (ma własność ‚display’ ustawioną na ‚none’) nie może zwiększać ani resetować liczników.

H2.secret {counter-increment: count2; display: none}

Pseudoelementy, które nie są generowane również nie mogą zwiększać ani resetować liczników.

h1::before {
    content: normal;
    counter-increment: heading;
}

Natomiast elementy, których własność ‚visibility’ jest ustawiona na ‚hidden’ zwiększają liczniki.

12.5 Listy

W CSS 2.1 można formatować podstawowe właściwości list. Element, którego własność ‚display’ jest ustawiona na ‚list-item’ generuje pole pierwotne dla treści elementu i opcjonalne pole wskazujące, że element jest elementem listy.

Własności list opisują podstawowe cechy formatowania wizualnego list: umożliwiają określenie typu punktora (obraz, glif lub liczba) oraz jego położenia względem pola pierwotnego (poza nim lub wewnątrz, przed treścią). Nie ma możliwości określenia osobnych stylów (koloru, fontu, wyrównania itp.) dla punktorów list ani dostosowania ich położenia względem pola pierwotnego. Własności te mogą zostać przejęte od pola pierwotnego.

Własności tła mają zastosowanie tylko do pola pierwotnego — pole punktora zewnętrznego jest przezroczyste.

12.5.1 Listy: własności ‚list-style-type’, ‚list-style-image’, ‚list-style-position’ oraz ‚list-style’

Własność ta służy do określania wyglądu punktora elementu listy, jeśli własność ‚list-style-image’ ma wartość ‚none’ lub obraz wskazywany przez URI nie może zostać wyświetlony. Wartość ‚none’ oznacza brak punktora. Poza tym są dostępne jeszcze trzy rodzaje punktorów: glify, systemy liczbowe oraz systemy alfabetyczne.

Glify określa się za pomocą własności disc, circle oraz square. Ich wygląd zależy od aplikacji klienckiej.

Systemy liczbowe określa się za pomocą następujących wartości:

decimal

Liczby dziesiętne, zaczynając od 1.

decimal-leading-zero

Liczby dziesiętne dopełniane wiodącymi zerami (np. 01, 02, 03, …, 98, 99).

lower-roman

Małe liczby rzymskie (i, ii, iii, iv, v itd.).

upper-roman

Wielkie liczby rzymskie (I, II, III, IV, V itd.).

georgian

Tradycyjna numeracja gruzińska (an, ban, gan, …, he, tan, in, in-an, …).

armenian

Tradycyjna numeracja ormiańska.

Systemy alfabetyczne określa się za pomocą następujących wartości:

lower-latin lub lower-alpha

Małe litery z zestawu ASCII (a, b, c, … z).

upper-latin lub upper-alpha

Wielkie litery z zestawu ASCII (A, B, C, … Z).

lower-greek

Małe litery klasycznej greki: alpha, beta, gamma, … (?, ?, ?, …)

Specyfikacja ta nie definiuje co się dzieje po wyczerpaniu wszystkich liter alfabetu. Na przykład po zaprezentowaniu 26 elementów listy w systemie ‚lower-latin’ dalsze działanie jest niezdefiniowane. Dlatego zalecamy stosowanie prawdziwych liczb do numerowania elementów długich list.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
     <TITLE>Numerowanie małymi cyframi rzymskimi</TITLE>
     <STYLE type="text/css">
          ol { list-style-type: lower-roman }
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> Pierwszy element listy.
      <LI> Drugi element listy.
      <LI> Trzeci element listy.
    </OL>
  </BODY>
</HTML>

  i Pierwszy element listy.
 ii Drugi element listy.
iii Trzeci element listy.

Własność ta służy do określenia obrazu reprezentującego punktor elementu listy. Jeśli obraz ten jest dostępny, zastępuje on punktor ustawiony przez własność ‚list-style-type’.

Rozmiar tego obrazu jest obliczany wg następujących zasad:

1. Jeśli obraz ma wewnętrzną szerokość lub wysokość, wartość ta staje się jego używaną szerokością lub wysokością.
2. Jeśli szerokość lub wysokość wewnętrzna obrazu jest wartością procentową, wartość ta jest obliczana w stosunku do 1 em.
3. Jeśli obraz nie ma wewnętrznego współczynnika i nie da się go obliczyć na podstawie jego szerokości i wysokości, przyjmowany zostaje współczynnik 1:1.
4. Jeśli obraz ma szerokość, ale nie ma wysokości, wysokość zostaje obliczona ze współczynnika wewnętrznego.
5. Jeśli nie da się obliczyć wysokości obrazu stosując powyższe zasady, zostaje przyjęta wysokość 1 em.
6. Jeśli obraz nie ma wewnętrznej szerokości, zostaje ona obliczona przy użyciu wydedukowanej wysokości i współczynnika wewnętrznego.

ul { list-style-image: url("http://png.com/ellipse.png") }

Własność ta służy do określania położenia pola punktora względem pierwotnego pola blokowego. Opis wartości:

outside

Pole punktora znajduje się poza polem pierwotnym. Specyfikacja CSS 2.1 nie określa precyzyjnie położenia pola punktora. Wymagane jest jednak, aby w przypadku elementów listy z własnością ‚direction’ ustawioną na ‚ltr’ pole to znajdowało się po lewej stronie treści, a w przypadku elementów z własnością ‚direction’ ustawioną na ‚rtl’ — po prawej. Własność ‚overflow’ takiego elementu nie powoduje obcięcia pola punktora. Pole punktora jest pozycjonowane stale względem obramowania pola pierwotnego bloku i nie jest przewijane wraz z jego treścią. Rozmiar i zawartość pola punktora mogą zmienić wysokość pola pierwotnego bloku i/lub wysokość jego pierwszego pola liniowego. W niektórych przypadkach mogą nawet spowodować powstanie nowego pola liniowego.


Uwaga: w przyszłych wersjach CSS te interakcje mogą zostać uściślone.

inside

Pole punktora znajduje się w pierwszym polu liniowym pola pierwotnego bloku. Specyfikacja CSS 2.1 nie określa dokładnie tego położenia pola punktora.

<HTML>
  <HEAD>
    <TITLE>Porównanie sposobów pozycjonowania punktora</TITLE>
    <STYLE type="text/css">
      ul         { list-style: outside }
      ul.compact { list-style: inside }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>Pierwszy element listy jest pierwszy
      <LI>Drugi element listy jest drugi
    </UL>
    <UL class="compact">
      <LI>Pierwszy element listy jest pierwszy
      <LI>Drugi element listy jest drugi
    </UL>
  </BODY>
</HTML>

‚list-style’ to własność zbiorcza służąca do ustawiania trzech własności: ‚list-style-type’, ‚list-style-image’ oraz ‚list-style-position’ w jednym miejscu.

ul { list-style: upper-roman inside }  /* Każdy element "ul" */
ul > li > ul { list-style: circle outside } /* Każde dziecko "ul"
                                             elementu "li" będącego dzieckiem
                                             elementu "ul" */

Mimo że własność ‚list-style’ można stosować bezpośrednio na rzecz elementów listy, (np. elementów "li" w HTML), należy to robić ostrożnie. Poniższe reguły wyglądają podobnie. Jednak pierwsza z nich deklaruje selektor potomka a druga (bardziej precyzyjna) selektor dziecka.

Autorzy używający tylko selektora potomka mogą nie uzyskać spodziewanych wyników. Rozważmy poniższy przykład:

<HTML>
  <HEAD>
    <TITLE>UWAGA: niespodziewane wyniki spowodowane zasadami kaskadowości</TITLE>
    <STYLE type="text/css">
      ol.alpha li   { list-style: lower-alpha }
      ul li        { list-style: disc }
    </STYLE>
  </HEAD>
  <BODY>
    <OL class="alpha">
      <LI>poziom 1
      <UL>
         <LI>poziom 2
      </UL>
    </OL>
  </BODY>
</HTML>

Zamierzeniem autora było, aby elementy poziomu 1 miały oznaczenia typu ‚lower-alpha’, a elementy poziomu 2 — ‚disc’. Jednak zasady kolejności w kaskadzie spowodują, że pierwsza reguła (zawierająca specyficzne informacje o klasie) zasłoni drugą. Problem ten został rozwiązany w poniższych regułach poprzez użycie selektora dziecka:

Innym możliwym rozwiązaniem byłoby zastosowanie własności ‚list-style’ tylko na rzecz elementów typu listowego:

Zasady dziedziczenia przekażą wartości własności ‚list-style’ z elementów OL i UL na elementy LI. Jest to zalecany sposób określania własności stylu listy.

ul { list-style: url("http://png.com/ellipse.png") disc }

Wartość ‚none’ we własności ‚list-style’ ustawia na ‚none’ własności ‚list-style-type’ i ‚list-style-image’, jeśli któraś z nich nie ma tej wartości. Jeśli obie te własności mają określone wartości, deklaracja jest błędna (i zostanie zignorowana).

ul { list-style: none }