Označení interních a externích odkazů

S vyhynutím IE 6 je bezpečně možné používat přímo v CSS selektory atributů.

To vytváří prostor pro relativně jednoduchý způsob zaměření odkazů vedoucí:

1. na cizí web,
2. na jinou interní stránku,
3. na soubor určitého typu.

Pro tyto účely je zajímavý selektor hledající začátek nebo konec atributu href.

Adresa začíná…

E[atribut^="hodnota"]

Adresa končí…

E[atribut$="hodnota"]

Odkaz na cizí web

Pokud se pro interní odkazy neuvádí absolutní cesta a pro externí ano, bude v drtivé většině případů externí odkaz cokoliv začínající na http:// nebo https://.

a[href^="http://"], a[href^="https://"] {color: red}

Pokud by se absolutní cesty používaly i pro interní odkazy, stačí pro danou doménu výše uvedené pravidlo přebít.

a[href^="http://jecas.cz"] {color: green}

Odkaz na vlastní web

Relativní odkaz na vlastní web bude začínat zpravidla na / nebo .

a[href^="/"], a[href^="."] {color: green}

Odkaz na soubor

Při odkazování na soubor určitého typu lze nastavit specifický styl podle přípony, tedy konce odkazu. V tomto případě bude odkaz na PNG soubor červený.

a[href$=".png"] {color: red}

Ilustrační ikona

Odkaz je ještě možné vyzdobit ikonou. Od Internet Exploreru 7 ji lze docela úspěšně brát z favicon.ico.

Nejprve nadefinovat pro externí odkazy umístění obrázku:

.ikona a[href^="http://"] {
  background: left center no-repeat; padding-left: 20px; background-size: 16px
}

A pro jednotlivé stránky nastavit favicon.ico jako obrázek na pozadí.

a[href^="http://jecas.cz"] {background-image: url(http://jecas.cz/favicon.ico)}

V případě, že se z dané stránky na jiné weby s faviconou odkazuje často, je vhodné všechny ikony spojit do jednoho CSS spritu.

Textový popisek

Kromě ikony můžeme i něco připsat vlastností content.

a[href^="http://jecas.cz"]:before {content: "jecas.cz"; background: #0D6AB7; color: #fff}