CSS - style dla elementów 'nieoznaczonych'

Czasami zdarza się taka sytuacja kiedy mamy dostęp jedynie do fragmentu kodu HTML (bez możliwości jego zmiany), a musimy przypisać określony kod CSS danym elementom nie mając tzw 'punktu zaczepnego' do którego możemy się odnieść.

(Opisywane tutaj rozwiązania są bardzo proste dla osób znających CSS w stopniu przynajmniej podstawowym. W dalszej części opiszę rozwiązania nieco bardziej 'zaawansowane' w porównaniu z tymi pierwszymi).

Ostatnio na blogu umieściłem boksy reklamowe z Blogvertising.pl (milionów na tym nie zarabiam, ale mam zamiar przeznaczyć te 'kilka groszy' na reklamę własnego bloga). Reklama inwazyjna nie jest, więc nic nie tracę. Jednak nie podobał mi się ten specyficzny niebieski kolor obrazka z tekstem 'wykup box' [zobacz]. Postanowiłem go zmienić na coś co będzie nieco mniej niebieskie. Jak widać (po prawej) udało się.

Dzisiaj dostałem e-maila z pytaniem jak można coś takiego osiągnąć. Tak więc odpowiadam.. ;)

Kod HTML jest wstawiany przez javaScript, więc nie mam możliwości jego edycji (chce wykorzystać tylko CSS). Kod wygląda tak (uprościłem adresy linków dla lepszej czytelności):

<div class="bnm_row"><a href="http://reklama" class="piwik_ignore"><img src="reklama.jpg" /></a><a href="http://wykup" class="piwik_ignore"><img src="wykup.jpg" /></a></div>

Pierwszy link wyświetla banner reklamodawcy, drugi niebieski banner Blogvertisign.
Cel jest taki: podmienić niebieski banner na własny pamiętając o tym, że rozmieszczenie bannerów może ulec zmianie.

Jak widać linki mają przypisane te same klasy - nic pozornie ich nie wyróżnia.
Rozwiązanie jednak jest banalnie proste: wystarczy wykorzystać selektor atrybutu o określonej wartości.

Gotowy kod będzie wyglądał tak:

.bnm_row a[href="http://wykup"] img {  width: 0;  height: 0;  padding-top: 125px;  padding-left: 125px;  background: url(nowy_box.jpg);}

Dzięki temu nadamy określony styl jedynie obrazkom które są linkami prowadzącymi do strony http://wykup. Dalszy kod odpowiada za wyzerowanie rozmiarów obrazka. Natomiast dzięki padding możemy przywrócić oryginalne rozmiary bloku, a następnie ustawić nowy obrazek jako tło. Efekt wizualny jest taki sam jak edycja samego kodu HTML.

Działający przykład możemy obejrzeć tutaj (przykład z 4 elementami gdzie 2 zostały zmienione). Warto zwrócić uwagę na to, że klikając prawym przyciskiem myszki na podmienionym obrazku mamy dostępne opcje dotyczące jedynie 'starego obrazka' (pokaż obrazek, zapisz obraz, itp).

Wyświetlanie określonej liczby elementów

Załóżmy, że mając do czynienia z tą samą zasadą budowy kodu HTML, chcemy wyświetlać tylko boksy reklamowe, oraz tylko maksymalnie 1 z tekstem 'wykup box'.
Czyli mając taki układ wyjściowy chcemy, aby zamiast dwóch wolnych boksów wyświetlił się tylko jeden. Liczba boksów reklamowych może się zmieniać, ale zawsze suma wszystkich elementów w kodzie HTML będzie wynosiła 4.

Można wykorzystać do tego ten kod CSS:

.bnm_row a[href="http://wykup"] { display: none; }.bnm_row a:first-child{ display: inline; }a[href="http://reklama"] + a[href="http://wykup"] { display: inline; }

Pierwsza linia ukrywa wszystkie elementy z linkiem do 'http://wykup'. Następna odpowiada za to, że zawsze jeden box zostanie wyświetlony (to przydatne w sytuacji gdy w kodzie HTML nie pojawią się żadne elementy reklamowe). Ostatnia linia odpowiada za wyświetlenie (wcześniej ukrytego) elementu z tekstem 'wykup box' który pojawia się zaraz po boksie reklamowym.

Jak widać wszystko działa.

Wyświetlanie określonej liczby elementów, cd.

Istnieje tylko jeden problem. W powyższym przykładzie konieczne było odwołanie się do elementu który był podlinkowany do 'http://reklama'. Trzeba ulepszyć to rozwiązanie tak, aby działało niezależnie od tego, do jakich adresów będą prowadzić boksy reklamowe, oraz niezależnie od ścieżki pliku graficznego która też może być zmienna.

Kod CSS jest jeszcze prostszy niż poprzednio:

.bnm_row a[href="http://wykup"] { display: none; }.bnm_row a + a + a + a { display: inline !important; }

Najpierw ukrywamy linki prowadzące do 'http://wykup', a następnie odkrywamy ten ostatni element (czyli czwarty w naszym przypadku jeśli tylko został ukryty). Ważne jest dodanie !important w drugiej linii, ponieważ pierwsza linia 'jest ważniejsza' ze względu na bardziej szczegółowy selektor.

Zobacz działający przykład.

Rozwiązania z wcześniejszych przykładów można także łączyć: przykład.

Podsumowanie

Myślę, że wpis przyda się nie tylko osobom korzystającym z Blogvertisign.pl. Elementy nie posiadające na pierwszy rzut oka 'punktów zaczepnych' też da się ostylować. Wystarczy znać możliwości CSS'a.

IE 7 poradzi sobie z wyżej opisanymi przykładami. Użytkownicy starszych wersji IE nie zobaczą żadnych zmian (pozytywnych, a także negatywnych).

Opisane problemy można rozwiązywać na wiele (również lepszych) sposobów - wystarczy poeksperymentować gdy nadejdzie taka potrzeba.