CSS

Selektory

Kooba

Selektor to uogólniając sposób zastosowania stylu CSS na konkretnym elemencie dokumentu.

          1 CSS level 1
               1.1 Selektor elementu (tag { styl })
               1.2 Selektor klasy (tag.klasa { styl })
               1.3 Selektor potomka (tag tag (...) tag { styl })</code>
          2 CSS level 2</code></code>
               2.4 Selektor dziecka (tag>tag {styl})</code></code>
               2.5 Selektor braci (tag + tag { styl })</code></code>
1 Czarny nagłówek h1</code></code></code>
     1.1 Czerwony nagłówek h2</code></code></code>
               1.1.2.6 Selektory atrybutów</code></code></code>
                    1.1.2.6.1 Prosty Selektor atrybutu</code></code></code>
                    1.1.2.6.2 Atrybut o określonej wartości</code></code></code>
                    1.1.2.6.3 Atrybut zawierający wyraz oddzielony od innych spacjami</code></code></code>
                    1.1.2.6.4 Atrybut zawierający wyraz oddzielony od innych myślnikami</code></code></code>
          1.1.3 CSS level 3</code></code></code>
               1.1.3.7 Tekstowa zawartość elementu</code></code></code>
               1.1.3.8 Element poprzedzony</code></code></code>
2 Nagłówek</code></code></code></code>
                    2.1.3.8.5 Selektor sufiksu</code></code></code></code>
                    2.1.3.8.6 Atrybut zawiera wyraz</code></code></code></code>

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.

Lorem ipsum

Lorem ipsum
nie wazne ważne nie ważne

<h4>Selektor identyfikatora (#identyfikator { styl })</h4>

Definicja dla tagu o określonym [[(x)html/atrybuty/id]]. Jest bardziej ogólna niż ta dla [[(x)html/atrybuty/class]], ale w jednym dokumencie id może powtórzyć sie tylko raz.

```css
#pojemnik { width: 100%; }

deklaracja ta moze dotyczyć tagu

Lorem ipsum

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

```css
#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 [[(X)html/q|cytatu]] znajdujący sie wewnątrz nagłówka [[(x)html/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 }

Jestem czerwony</li> </ul>

<h4>Grupowanie selektorów ( tag, tag, tag {styl})</h4>

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

```css
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 [[(x)html/ol|liście uporządkowanej]] a inny [[(x)html/ul|liście nie uporządkowanej]], możemy skorzystać z selektora rodzica.

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

Po takiej definicji, tag [[(x)html/li]] znajdujący sie wewnątrz tagu ul będzie miał tekst koloru czerwonego, a ten znajdujący się w tagu [[(x)html/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 [[(X)HTML/h2]]:

Czarny nagłówek h1

Czerwony nagłówek h2


<dfn>Internet Explorer 6 nie obsługuje tego selektora!</dfn>

<h4>Selektor ogólny (*)</h4>

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

```css
* { 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 [[(x)html/img|obrazków]] posiadających [[(x)html/Atrybuty/Alt|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 [[(x)html/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 [[(x)html/acronym|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 [[(x)html/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; }

Nagłówek

Element rozdzielający h1 od 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.


<h4>Selektory atrybutów</h4>

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

<h5>Selektor prefiksu</h5>

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ę.

```css
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

CSS

2 komentarzy

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").

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).