728b.gif

Jak spočítat sílu CSS selektoru?

05.08.08 00:40 | Tvorba webu | autor: Chates (profil) | Čteno: 5632x |
Nic mocUjde toPrůměrDobréVýborné (Žádná hodnocení)

sila_css_selektoruKaždý, kdo si někdy napsal nějaké to svoje CSSko, se určitě dostal do nesnáze typu „Napsal jsem background-color: red; a ono to není červený.“ Téměř vždy to bývá způsobeno jiným selektorem, který je silnější a pozadí přebarví na jinou barvu. Jenže podle čeho se určí, který selektor bude silnější? Dá se to nějak přesně spočítat? Ano dá!

Kdo se vyzná trošku víc, tak ví, že čím více selektor specifikuje, tím bude pravidlo silnější a že když vlepí CSS přímo do HTML, tak to bude nejsilnější. Má víceméně pravdu. Já jsem dlouho používal známou metodu „Přidávám identifikátory, dokud to nezačne fungovat.“ Určitě se mnou ale budete souhlasit, že to je trošku málo a že by bylo dobré to nějak jednoznačně určit nebo spočítat.

Který selektor má podle vás větší váhu? Bude pozadí odkazu červené nebo zelené?

  1. body #middle div ul li.marked ul li.odkaz a { background-color: red; }
  2. div#middle div#content ul li.marked ul li a { background-color: green; }

Jdeme to raději vypočítat! Pomůže nám následující přehled:

  • element – 1 bod
  • class - 10 bodů
  • id - 100 bodů
  • inline CSS – 1000 bodů

Náš první selektor bude tedy mít za element body 1 bod, identifikátor #middle 100 bodů, pak za elementy div, ul po 1 bodu. Za li.marked a li.odkaz počítejte u každého 10 bodů za class + 1 za element. ul, a jsou opět po 1 bodu. Celkem tedy: 1 + 100 + 1 +1 + 11 + 1 + 11 + 1 = 127

Druhý selektor vypadá následovně: div#middle(1+100) div#content(1+100) ul(1) li.marked(1+10) ul(1) li(1) a(1)227

Vidíme, že druhé pravidlo je daleko silnější, i když to na první pohled nevypadá. Pozadí bude zelené. Snad to bude někomu užitečné, až se dostane do „typického“ CSS problému.

336b.gif

Líbil se ti tento článek? Ukaž ho i ostatním! Pro snadné přidání odkazu na Facebook, Linkuj.cz nebo Twitter klikni na jednu z ikonek výše a nech další, ať si článek také přečtou.

Zanechat odpověď