Styl elementů podle jejich počtu

Kromě přizpůsobování obsahu stránky šířce prohlížeče (responsivní design) je jedním z oříšků při navrhování CSS vypořádání se s proměnlivým počtem položek – například ve vodorovné navigaci.

Pokud se nastavením velikostí písma, odsazením a podobně připraví horisontální menu pro čtyři položky, může nastat problém při přidávání dalších položek.

V případě, že na variabilní počet tvůrce webu nemyslel, stane se něco z následujících případů:

1. Jednotlivé odkazy na sebe budou nepěkně nalepeny.
2. Nabídka se rozuteče na více řádků, což nemusí zase tolik vadit. Položky budou pořád srozumitelně čitelné.

Tyto možnosti znázorňuje obrázek (optimální se zdá poslední způsob, kde se zmenší velikost písma):

Také se může stát, že se menu do prostoru zkrátka nevejde, takže buď vyleze ze svého rodičovského elementu, nebo bude oříznuté (overflow: hidden).

Nejsnazší je nejspíš počítat s přetečením do více řádků. K lepšímu výsledku ale povede stylování na základě počtu položek.

CSS selektor pro počet

Jedna možnost je počet položek spočítat JavaScriptem a nastavit podle toho společnému rodiči třídu. Nebo přímo skriptem přeměřovat rozměry a podle toho velikost písma upravovat.

Existuje ale i způsob čistě v CSS pomocí selektorů funkčních od IE 9.

Jedna položka

Pro příklad se bude vycházet z HTML kódu následující podoby:

<div class="polozky">
  <div class="polozka">1</div>
  <div class="polozka">2</div>
  …
</div>

Že je položka jen jedna, jde určit selektorem only-child nebo only-of-type (pro zohlednění jen totožných názvů HTML značek).

.polozka:only-child {
  /* jen jedna */
}

Na základě toho není problém v případě jediné položky zvětšit její rozměr. První položka je větší jen proto, že je v rodičovském elementu osamocená.

Přesný počet položek

Pro sestavení selektoru pro přesně stanovený počet elementů poslouží selektor nth-last-child.

Ten zaměří n elementů od konce. Protože je cílem reagovat na přesný počet, použije se ještě :first-child (aby n-tá položka od konce byla zároveň první).

.polozka:nth-last-child(3):first-child {
  /* styly pro první položku ze 3 */
}

Nakonec stačí přes selektor libovolného sourozence zaměřit i ostatní položky:

.polozka:nth-last-child(3):first-child,
.polozka:nth-last-child(3):first-child ~ .polozka {
  /* styly pro položky, když jsou 3 */
}

Pro vyzkoušení zkuste pár položek přidat.

+ Přidat Odebrat

Velikost písma položek by se měla dynamicky měnit podle toho, jestli je jen jedna, dvě, tři nebo čtyři.

Více nebo méně než n

Nastavovat speciální styl pro každý přesný počet by nemuselo být úplně elegantní, naštěstí jde snadno selektor upravit, aby se vztahoval na počet položek od do.

Počet položek n a více

.polozka:nth-last-child(n + 4):first-child,
.polozka:nth-last-child(n + 4):first-child ~ .polozka {
  /* styly pro položky, když jsou 4 a více */
}

Položek n a méně

.polozka:nth-last-child(-n + 3):first-child,
.polozka:nth-last-child(-n + 3):first-child ~ .polozka {
  /* styly pro položky, když jsou 3 a více */
}

Odkazy jinam

• A List Apart Article: Quantity Queries for CSS