Wstęp do CSS - część druga
Selektory
Selektor to wskaźnik mówiący przeglądarce, do jakiego elementu (elementów) strony ma się konkretny styl odwoływać.
Selektor ogólny
Selektor ogólny to selektor wskazujący wszystkie elementy strony. Czyli jeśli chcemy, żeby wszystko, co jest na naszej stronie było czerwone (osobiście nie polecam ;-) ) musimy napisać:
* {
color: red;
}
Gwiazdka w tym przypadku zastępuje nazwę wszystkich tagów.
Selektor podstawowy
Selektor podstawowy wskazuje wszystkie tak samo nazwane jak selektor elementy na stronie. Czyli jeśli chcemy, żeby czcionka w akapitach naszej strony była wielkości dwunastu punktów musimy napisać coś takiego:
p {
font-size: 12pt;
}
W tym przypadku litera p oznacza, że styl odnosi się to tagu <p>, czyli akapitu. Tak samo styl, który miałby odnosić się do wszyskich nagłówków <h1> musiałby zaczynać się od znaków h1.
Selektory dziecka i potomka
Te dwa selektory w działaniu są do siebie bardzo podobne, jednak selektor potomka "działa głębiej" jeśli chodzi o strukturę dokumentu. Na przykład jeśli mamy strukturę: jeden kontener <div>, w jego środku znajduje się akapit <p>, a w tym akapicie hiperłącze opisane tagiem <a>, to rodzicem hiperłącza jest akapit, akapit jest dzieckiem kontenera, a hiperłącze jest potomkiem kontenera. Tak samo potomkiem kontenera jest akapit, ale jest on szczebel wyżej w drzewie hierarchii. Przykładowy selektor dziecka wygląda tak:
div > p {
color: red;
}
a selektor potomka:
div a {
color: orange;
}
Jednak zapis:
div > a {
color: orange;
}
nie ma sensu, dlatego, że w naszym przykładzie hiperłącze nie jest dzieckiem, tylko potomkiem (konkretnie wnukiem) kontenera.
Selektor elementów następujących po sobie
Jeżeli styl ma odnosić się tylko i wyłącznie do na przykład nagłówka drugiego stopnia (<h2>), który jest umieszczony (nie zawiera się, tylko sąsiaduje) zaraz po nagłówku pierwszego stopnia (<h1>) musimy wykorzystać możliwości znaku +. Dla naszego przykładu odpowiedni styl mógłby wyglądać następująco:
h1 + h2 {
font-weight: bold;
}
Taki styl będzie się odnosił tylko do następujących po nagłówku pierwszego stopnia nagłówków drugiego stopnia.
Selektory klasy i identyfikatora
Na początku muszę wyjaśnić czym jest klasa, a czym jest identyfikator. Klasa jest zbiorem elementów, które mają taką samą wartość atrybutu class. Czyli na przykład elementy <p class="klasa"> oraz <div class="klasa"> należą do tej samej klasy. W jednym dokumencie hipertekstowym może być wiele elementów tej samej klasy. Aby wyróżnić jeden element stosuje się identyfikatory. Identyfikator to wartość parametru id znacznika, czyli element <p id="pierwszy"> posiada identyfikator "pierwszy". W dokumencie hipertekstowym nie powinny znajdować się dwa (ani więcej) elementy o takim samym identyfikatorze, natomiast nic nie stoi na przeszkodzie, żeby jeden element był przypisany do konkretnej klasy oraz posiadał własny, unikalny identyfikator. Możliwe jest także przypisanie elementu do kilku klas jednocześnie przez wpisanie ich nazw w parametrze class rozdzielonych spacjami.
Selektor dla klasy wygląda następująco:
.klasa {
color: blue;
}
Ten zapis będzie odnosił się do wszystkich elementów w tej klasie.
div.klasa {
color: black;
}
Ten zapis natomiast, odniesie się tylko do kontenerów będących w tej klasie.
Podobna sytuacja przedstawia się z selektorami indentyfikatora:
#identyfikator {
color: brown;
}
lub
p#identyfikator {
color: white;
}
Różnica jest analogiczna do selektora klas. Pierwszy zapis odnosi się do elementu o zadanym identyfikatorze, czymkolwiek on by nie był, a drugi odnosi się tylko do akapitu o zadanym identyfikatorze.
Selektory parametrów
Istnieje także możliwość "wybierania" elementów na podstawie parametrów jakie posiadają. Nie jest to powszechnie spotykane rozwiązanie. Właściwie to można rzec, że jest to zapomniany sposób, a na dodatek nie obsługiwany przez najpopularnIEjszą obecnie przeglądarkę. Zalety wykorzystania tej metody ujawniają się na przykład przy korzystaniu z formularzy, w których to, elementy są zawsze tagami <input />, ale z odpowiednimi parametrami. Co zrobić, żeby zastosować różne style dla pól tekstowych, przycisków itp.? Właśnie zastosować tą metodę.
Sposoby wykorzystania tej metody są następujące:
img[title] {
border: none;
}
Ten selektor wskazuje wszystkie tagi <img />, które zawierają parametr title, niezależne od jego zawartości. Te, które go nie zawierają, nie zostaną objęte działaniem tego stylu.
input[type="submit"] {
background-color: white;
}
Ten selektor wskaże tylko te elementy <input />, które parametr type mają ustawiony na submit. Inne elementy tego typu, nie zostaną wzięte pod uwagę.
div[class~="klasa"] {
border: 1px solid black;
}
Jak, już wspominałem, możliwe jest przypisanie jednego elementu do kilku klas jednocześnie. Te klasy są rozdzielone w parametrze spacjami. Ten selektor zadziała tylko na kontenery, które spośród wielu innych, są przypisane do wymienionej klasy. Oczywiście to samo można uzyskać przy pomocy selektora klasy, ale to tylko przykład.
p[lang|="en"] {
font-weight: bold;
}
Ten selektor wskaże tylko te elementy, których atrybut lang zaczyna się od "en" i jest rozdzielony myślnikiem (np. en-GB, en-US).
