CSS

Selektory

  • 2006-08-10 12:56
  • 2 komentarze
  • 3839 odsłon
  • Oceń ten tekst jako pierwszy
Selektor to uogólniając sposób zastosowania stylu CSS na konkretnym elemencie dokumentu.

Spis treści

               1 CSS level 1
                    1.1 Selektor elementu (tag { styl })
                    1.2 Selektor klasy (tag.klasa { styl })
                    1.3 Selektor identyfikatora (#identyfikator { styl })
                    1.4 Selektor potomka (tag tag (...) tag { styl })
                    1.5 Grupowanie selektorów ( tag, tag, tag {styl})
               2 CSS level 2
                    2.1 Selektor dziecka (tag>tag {styl})
                    2.2 Selektor braci (tag + tag { styl })
                    2.3 Selektor ogólny (*)
                    2.4 Selektory atrybutów
                         2.4.1 Prosty Selektor atrybutu
                         2.4.2 Atrybut o określonej wartości
                         2.4.3 Atrybut zawierający wyraz oddzielony od innych spacjami
                         2.4.4 Atrybut zawierający wyraz oddzielony od innych myślnikami
               3 CSS level 3
                    3.1 Tekstowa zawartość elementu
                    3.2 Element poprzedzony
                    3.3 Selektory atrybutów
                         3.3.1 Selektor prefiksu
                         3.3.2 Selektor sufiksu
                         3.3.3 Atrybut zawiera wyraz


CSS level 1


Selektor elementu (tag { styl })


Definiuje styl dla określonego tagu. np

h1 { font-weight: bold; }


W ten sposób można deklarować jeden styl dla wielu tagów, oddzielając je przecinkiem.

h1, h2, h3  { font-weight: bold; }


Selektor klasy (tag.klasa { styl })


Definuje styl dla określonej klasy (atrybut class języka html). np

input.przycisk { border: 1px solid red }



powyższa deklaracja dotyczy tagu

<input (...) class="przycisk />


Nazwe tagu można pominąć, deklaracja będzie wtedy dotyczyła wszsytkich tagów o takiej klasie.

.wazne { font-weight: bold; }


Deklaracja ta dotyczy np.

<p class="wazne">Lorem ipsum</p>
<div class="wazne">Lorem ipsum</div>
<div>nie wazne <span class="wazne">ważne</span> nie ważne</div>


Selektor identyfikatora (#identyfikator { styl })


Definicja dla tagu o określonym id. Jest bardziej ogólna niż ta dla class, ale w jednym dokumencie id może powtórzyć sie tylko raz.

#pojemnik { width: 100%; }


deklaracja ta moze dotyczyć tagu

<div id="pojemnik">Lorem ipsum</div>


Można mieszać też ten selektor z innymi. Np.

#pojemnik .wazne { font-weight: bold; }


dotyczy tagów o klasie "wazne" znajdujących sie wewnątrz tagu o id = "pojemnik".

Selektor potomka (tag tag (...) tag { styl })


Selektor dotyczy tagów znajdujących sie niżej w hierarchii dokumentu.

Ta deklaracja dotyczyć będzie cytatu znajdujący sie wewnątrz nagłówka h1:

h1 q { 
    font-style: none; 
    color: red; 
}


A ten przykład dotyczy odnośnika znajdującego się wewnątrz listy nieuporządkowanej:

ul li a { color: red }


<ul>
    <li><a href="">Jestem czerwony</a></li>
</ul>


Grupowanie selektorów ( tag, tag, tag {styl})


Grupowanie selektor oznacza po prostu wymienienie wszystkich selektorów, których styl dotyczy:

body, div, p, ul, ol, li { margin: 0px; padding: 0px; }


Powyższy przykład ustala zerowe marginesy dla wymienionych elementów (tą czynność akurat lepiej było zrealizować selektorem ogólnym "*", chyba ze dbamy o to aby strona działała poprawnie w Internet Explorerze 5.5 i starszych).

CSS level 2


Selektor dziecka (tag>tag {styl})


Gdy chcemy nadać inny styl liście uporządkowanej a inny liście nie uporządkowanej, możemy skorzystać z selektora rodzica.

ul>li { color: red; }
ol>li { color: blue; }


Po takiej definicji, tag li znajdujący sie wewnątrz tagu ul będzie miał tekst koloru czerwonego, a ten znajdujący się w tagu ol, niebieskiego.

Selektor ten różni sie od selektora potomka tym, że element będący dzieckiem musi znaleźć sie bezpośrednio wewnątrz elementu będącego rodzicem.

Internet Explorer 6 nie obsługuje tego selektora!

Selektor braci (tag + tag { styl })


Pozwala ostylować jeden z sąsiadujących ze sobą elementów (braci).

h1 + h2 { color: red; }


Pokoloruje na czerwono taki nagłówek h2:

<h1>Czarny nagłówek h1</h1>
<h2>Czerwony nagłówek h2</h2>


Internet Explorer 6 nie obsługuje tego selektora!

Selektor ogólny (*)


Ten selektor oznacza wszystkie tagi. Używa sie go na przykład do resetowania marginesów w całym dokumencie.

* { margin: 0px; padding: 0px; }


Internet Explorer 5.5 nie obsługuje tego selektora!

Selektory atrybutów


W CSS2 i CSS3 zostały wprowadzone selektory rozróżniające elementy na podstawie atrybutów, jakie posiadają. Daje to spore możliwości ograniczone pomysłowością autora strony. Niektóre rzeczy, które trzeba było wcześniej realizować nadając elementom klasy lub używając języków server-side, można teraz zrealizować za pomocą samego CSS'a.

Niestety Internet Explorer 6 i starsze nie obsługują żadnego z tych selektorów.

Prosty Selektor atrybutu

Odnosi się do elementów zawierających podany atrybut, nie ważne, jaką miałby on wartość. Można go użyć np do oznaczenia obrazków posiadających tekst alternatywny.

img[alt] { border: 3px solid red; }


Atrybut o określonej wartości

Przykładem może być specjalne ostylowanie odnośników prowadzących do strony głównej.

a[href="index.html"] { font-size: 2em; }


Można też przy jego użyciu, bez stosowania dodatkowych klas ostylować różne rodzaje tagu input.

input[type="text"] { styl dla pola tekstowego }
input[type="checkbox"] { styl dla checkboksa }
input[type="submit"] { styl dla przycisku wysyłającego dane }


Atrybut zawierający wyraz oddzielony od innych spacjami

Ostylowanie skrótów dotyczących jakiegoś języka programowanie:

acronym[title~="Language"] { color: green; }


Taka deklaracja będzie dotyczyła akronimu mającego takie title:


title="Categorically Abstract Machine Language"
title="Common Language Runtime"
title="Java Data Object Query Language"
itd..


Atrybut zawierający wyraz oddzielony od innych myślnikami

Na przykład taka deklaracja będzie dotyczyła body w dowolnym języku angielskim tzn en-gb, en-au, en-ca, en-us itd.

body[lang|="en"] { color: blue; }


CSS level 3


Niestety Internet Explorer 6 i starsze nie obsługują żadnego z selektorów CSS 3

Tekstowa zawartość elementu


Element mający w treści dany ciąg znaków. Selektor ten istnieje w specyfikacji CSS3, ale żadna przeglądarka go nie interpretuje.

p:contains("foo") { color: red; }


Element poprzedzony


Podobny do selektora dziecka, z tym ze element nie musi być bezpośrednio poprzedzony przez drugi element.

h1 ~ p { color: red; }


<h1>Nagłówek</h1>
<div>Element rozdzielający h1 od p</div>
<p>Ten paragraf będzie pokolorowany na czerwono, ponieważ wcześniej w tym dokumencie pojawił się nagłówek h1, nie ważne ze nie stoi on bezpośrednio przed tym elementem.</p>


Selektory atrybutów


Selektory bazujące na wartościach atrybtów.

Selektor prefiksu

To też jest selektor oparty na atrybucie. Oznacza on element o atrybucie zaczynającym sie od danego ciągu znaków. Pozwala ostylować na przykład odnośniki prowadzące poza naszą witrynę.

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


Selektor sufiksu

Podobny do selektora prefiksu, tylko określa, co znajduje się na końcu wartości atrybutu. Może się przydać do ostylowania odnośników do plików o danym rozszerzeniu.

a[href$=".zip"] { font-weight: bold; }


Atrybut zawiera wyraz

To jest coś w rodzaju dzikiej karty, odnosi sie do elementów z atrybutem zawierającym w wartości dany ciąg znaków.
span[title*="oko"]

Ten przykład pasować będzie do spanów o title

ma oko
maroko
około

2 komentarze

ptak82 2006-07-23 07:38

Ktos ma racje, mi tez sie wydaje, że > to selektor dziecka lub potomka. (+) to nie selektor sąsiada a selektor siostrzany (ogólnie uzywana forma dopuszcza zamiast siostrzany, formy "rodzeństwa" lub "braci").

Ktos 2006-07-17 19:25

Czy > to nie jest przypadkiem selektor dziecka? Selektorem rodzica byłby < którego niestety nie ma. Trzeba też będzie dodać selektor sąsiada (+). Z tym, zę jedna uwaga - spotkałem się z określeniem, że są to kombinatory, a nie selektory (vide http://kurs.browsehappy.pl/CSS/Selektory).