FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
jakubho
Člen
Avatar
jakubho:29.8.2016 19:48

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.8.2016 19:48
Chyba-Jediná jistota v životě programátora.
Avatar
Michal
Člen
Avatar
Michal:29.8.2016 19:58

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í
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
29.8.2016 19:58
Avatar
jakubho
Člen
Avatar
Odpovídá na Michal
jakubho:29.8.2016 20:54

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.8.2016 20:54
Chyba-Jediná jistota v životě programátora.
Avatar
Michal
Člen
Avatar
Michal:29.8.2016 21:05

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
 
Nahoru Odpovědět
29.8.2016 21:05
Avatar
jakubho
Člen
Avatar
Odpovídá na Michal
jakubho:29.8.2016 21:14

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

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

Co to udělá se seznamem v seznamu?

 
Nahoru Odpovědět
29.8.2016 21:56
Avatar
Michal
Člen
Avatar
Odpovídá na 00
Michal:29.8.2016 22:24

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.8.2016 22:24
Avatar
jakubho
Člen
Avatar
jakubho:30.8.2016 14:44

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.8.2016 14:44
Chyba-Jediná jistota v životě programátora.
Avatar
Michal
Člen
Avatar
Odpovídá na jakubho
Michal:30.8.2016 16:00

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
 
Nahoru Odpovědět
30.8.2016 16:00
Avatar
jakubho
Člen
Avatar
Odpovídá na Michal
jakubho:30.8.2016 22:29

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.8.2016 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.