Diskuze: Stylování čísel v číslovaném seznamu

HTML a CSS HTML a CSS Stylování čísel v číslovaném seznamu American English version English version

Avatar
jakubho
Člen
Avatar
jakubho:

Zdravím!

Zajímala by mě taková věc, kterou jsem na Googlu nikde nemohl nalézt. Jde mi o to, jestli je nějaký způsob, jak v číslovaném seznamu pracovat pomocí CSS pouze s pořadovým číslem. Myslím tím, že když mám nějaký kód:

<ol>
        <li>První položka</li>
        <li>Druhá položka</li>
</ol>

Tak mohu dát třeba celý první řádek tučně. Já bych ale chtěl pracovat pouze s tou jedničkou, dvojkou, trojkou atd. na začátku. Tj. docílit např. tohoto:
1. První položka
2. Druhá položka

Je to jen sen, a nebo je na to nějaký selektor?

Odpovědět 29. srpna 19:48
Chyba-Jediná jistota v životě programátora.
Avatar
Oxtimus
Člen
Avatar
Oxtimus:

Ahoj, žádný konkrétní selektor přímo pro to určený neznám, ale lze toho docílit tak, že „odstraníš“ předdefinované odrážky a za ně si přes pseudoelement :before dosadíš své vlastní, ostylované:

ol {
   counter-reset: item;
}

li {
   display: block;
}

li:before {
   content: counter(item) ". ";
   counter-increment: item;
   font-weight: bold;
}
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět  +1 29. srpna 19:58
Avatar
jakubho
Člen
Avatar
Odpovídá na Oxtimus
jakubho:

S counter-něco jsem nikdy nedělal, je to pěkně těžké na pochopení mi přijde.Prošel jsem si pár webů a zdejší manuál, ale nechápu jednu věc.

ol {
   counter-reset: item;
}

Já přeci nebudu potřebovat počítání resetovat(nebo ano?), k čemu je to tedy dobré?

Nahoru Odpovědět 29. srpna 20:54
Chyba-Jediná jistota v životě programátora.
Avatar
Oxtimus
Člen
Avatar
Oxtimus:

Pokud používáš counter, můžeš si ho představit jako jakousi proměnnou v CSS, která se inkrementuje pokaždé, když je použita u nějakého elementu. Counterů můžeš mít víc (zde jsem ho pojmenoval jako item, ale název může být libovolný, třeba counter(poradi).

Než je ale možné pracovat s nějakým counterem, je nutné ho vytvořit (nastavit jeho hodnotu na 0). To by šlo udělat jen jednou globálně, např. u elementu body:

body {
   counter-reset: item;
}

To by ale znamenalo, že bude společný pro všechny prvky na stránce a tudíž, pokud by si měl více číslovaných seznamů za sebou, tak by jejich číslování navazovalo na sebe. Zápis:

ol {
   counter-reset: item;
}

prakticky znamená, že pokaždé, když se začne nový seznam, začne se také číslovat od znovu.

Editováno 29. srpna 21:06
 
Nahoru Odpovědět 29. srpna 21:05
Avatar
jakubho
Člen
Avatar
Odpovídá na Oxtimus
jakubho:

Myslím, že už to chápu. Díky moc! :-)

Nahoru Odpovědět 29. srpna 21:14
Chyba-Jediná jistota v životě programátora.
Avatar
00
Člen
Avatar
Odpovídá na Oxtimus
00:

Co to udělá se seznamem v seznamu?

 
Nahoru Odpovědět 29. srpna 21:56
Avatar
Oxtimus
Člen
Avatar
Odpovídá na 00
Oxtimus:

Zkoušel jsem to, a v základní verzi výše zmíněný zápis částečně funguje i pro vnořené seznamy:

  1. První položka
  2. Druhá položka
    1. První podpoložka
    2. Druhá podpoložka
  3. Třetí položka
    1. První podpoložka
    2. Druhá podpoložka

Pokud by se ale vyžadovalo lepší číslování (2.1., 2.2., ...), je třeba použít dva countery, kde každý bude sloužit pro jednu úroveň seznamu. Na JSFiddle jsem umístil živou ukázku.

li {
  display: block;
}

.parent {
   counter-reset: parent;
}

.parent > li:before {
   content: counter(parent) ". ";
   counter-increment: parent;
   font-weight: bold;
}

.parent > ol {
   counter-reset: child;
}

.parent > ol > li:before {
   content: counter(parent) "." counter(child) ". ";
   counter-increment: child;
   font-weight: bold;
}
 
Nahoru Odpovědět 29. srpna 22:24
Avatar
jakubho
Člen
Avatar
jakubho:

Ještě bych se chtěl zeptat, jestli by takto šel napodobit číslovaný seznam s hodnotou reversed, tedy obrácený...

Nahoru Odpovědět 30. srpna 14:44
Chyba-Jediná jistota v životě programátora.
Avatar
Oxtimus
Člen
Avatar
Odpovídá na jakubho
Oxtimus:

Tady už je to trochu problematičtější. Pokud je délka seznamu stanovena předem, můžeš counter nastavit na hodnotu počtu odrážek + 1 a po každé odrážce od counteru odečítat:

ol {
  counter-reset: item 4; /* Seznam bude mít 3 položky (3, 2, 1) */
  list-style: none;
}

ol li:before {
   content: counter(item) ". ";
   counter-increment: item -1;
   font-weight: bold;
}

V případě, že délka seznamu není pevně dána, nenapadá mě nic jiného, než vytvořit pouhou iluzi toho, že se jedná o převrácený seznam. Jde to přes CSS vlastnost transform, je ale nutné zde také jednotlivé položky psát obráceně (od poslední k první):

ol {
  counter-reset: item;
  list-style: none;
  transform: rotate(180deg);
}

ol li {
   transform: rotate(-180deg);
}

ol li:before {
   content: counter(item) ". ";
   counter-increment: item;
   font-weight: bold;
}

Nejideálnější by bylo, kdyby si veškeré seznamy generoval na serveru např. pomocí PHP. Do atributu data-length by si pak mohl uložit velikost seznamu a k té přistoupit v CSS přes vlastnost attr():

ol {
  counter-reset: item attr(data-length);
  counter-increment: item;
  list-style: none;
}

ol li:before {
   content: counter(item) ". ";
   counter-increment: item -1;
   font-weight: bold;
}

Zde jsou živé ukázky na všechny tři způsoby.

Editováno 30. srpna 16:02
 
Nahoru Odpovědět 30. srpna 16:00
Avatar
jakubho
Člen
Avatar
Odpovídá na Oxtimus
jakubho:

Páni, to by mě nenapadlo, to je fakt zajímavý řešení :O Koukal jsem tedy jen na tu druhou možnost, protože to je to, co potřebuju...

Děkuju moc :-)

Nahoru Odpovědět 30. srpna 22:29
Chyba-Jediná jistota v životě programátora.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.