Dziś chciałbym się pochylić nad całkowitymi podstawami CSS bez których nie dałoby się czegokolwiek ostylować. Selektory są używane cały czas podczas tworzenia stron i cały czas dochodzą nowe, które mają ułatwiać nam pracę. Również powoli szykują się selektory 4-tego poziomu, o których chcę napisać parę słów w drugiej części postu.
Selektory klasy 1&2
Klasa pierwsza i druga są to najbardziej znane selektory, które wykorzystujemy najczęściej. Są podstawą przy tworzeniu stron internetowych. Mamy tutaj następujące selektory:
- Element
Jako element możemy wstawić dowolny prawidłowy element z html np..: p, div, h1, header,footer. Następuje tutaj przypisanie styli do każdego elementu na naszej strony. Przykładowe zastosowanie np.: przypisanie czcionki do elementu body
- .nazwa-stylu /*.nazwa-stylu
Tutaj styl przypisujemy do konkretnej nazwy klasy, którą umieściliśmy w elemencie html pod atrybutem class. Bardzo często wykorzystywane w normalnej pracy.
- Element.nazwa-stylu
Bardziej szczegółowe przypisanie co do przedstawionego powyżej. Styl będzie przypisany tylko jeżeli interesujący nasz element będzie posiadał atrybut class z wartością 'nazwa-stylu'.
- #identyfikator / element#identyfikator
Przypisanie stylu do elementu, który posiada atrybut id z wartością identyfikator. Można też wcześniej podać typ elementu ale jak dla mnie jest to niepotrzebne ponieważ powinien istnieć tylko jeden element z konkretnym identyfikatorem. Również lepiej nie korzystać z tego tylko oprzeć stylowanie o klasy.
Stylowanie przy pomocy atrybutów
- Element[atrybut]
Elementy HTML mogą posiadać atrybuty, które precyzują jak element będzie się wyświetlać lub zachowywać. Pełną listę atrybutów dla wszystkich elementu możecie znaleźć tutaj. Korzystając z tego selektora można ostylować tylko elementy posiadające atrybut, który nas interesuje.
- Element[atrybut="wartość"]
Tutaj adekwatnie nie ma co komentować. Jest to rozszerzenie selektora powyżej, który sprawdza również wartość.
- Element[atrybut ~="wartość"]
Niektóre atrybuty mogą przyjąć więcej niż jedną wartość. Kolejne wartości są oddzielane spacja np..: atrybut="wartość1 wartość2 wartość wartosc3" itd.. Korzystając z tego selektora możemy przypisać styl jeżeli jedną wśród tych wartości jest ta poszukiwana przez nas np.: wartość.
- Element[atrybut | ="wartość"]
Ten selektor jest interesujący ponieważ przypisuje styl do elementu który posiada szukany przez nas atrybut z konkretną wartością lub też posiada wartość po której następuje myślnik i dalszy tekst np.: atrybut|="komórka" znajdzie takie coś <element atrybut="komórka"> jak i coś takiego <element atrybut="komórka-1">
Stylowanie przy pomocy położenia elementów
- Element1 Element2 / Element1 >> Element2(CSS 4)
Zapis ten oznacza, iż styl zostanie przypisany do każdego Elementu2, który znajduje się wewnątrz Elementu1. W tym selektorze nie ma znaczenia jak głęboko znajduje się Element2. Do tej pory była wykorzystywana spacja by uzyskać ten efekt ale w CSS4 zostanie wprowadzony symbol '>>' który będzie tak samo interpretowany przez przeglądarki
- Element1 > Element2
Efekt jest podobny do powyższego selektora z pewną różnicą. Element2 zostanie ostylowany tylko jeżeli jest bezpośrednim dzieckiem Elementu1. jeżeli jest gdzieś niżej w hierarchii to nie zosatnie ostylowany
Styl: p > h1
- Element1 + Element2
Tutaj Element2 zostanie ostylowany o ile jest położony bezpośrednio po Element1 i mają wspólnego rodzica
Styl: p+h1
html
<p>
</p>
<h1>Ten zostanie ostyloway</h1>
<h1>Ten już nie</h1>
Stylowanie przy pomocy pseudoklas
Następne parę elementów jest określane jako pseudoklasy i w pewien sposób pozwalają kontrolowaac zachowanie elementów lub też ich położenie
- a:link
W ten sposób możemy ostylować link, który nie został jeszcze odwiedzony.
- a:visited
Dotyczy linku, który został przez nas odwiedzony. Dobrze to widać np.: w Google'u gdie odwiedzone linki zmieniają kolor. W zależności od przeglądarki po pewnym czasie linki tracą atrybut visited.
- element:active
W ten sposób możemy ostylować elementy które zosatły aktywowane przez użytkowników np.: kliknął w link ale nie puścił jeszcze przycisku myszy co pozwoliłoby mu przejść na inną stronę. Co znaczy dla elementu być aktywnym możecie znaleźć tutaj
- Element:hover
Element otrzymuje klasę hover w momencie gdy użytkownik umieści kursor myszki nad elementem.
- Element:focus
Za pomocą tej pseudoklasy możemy określić jak ma się zachowywać element gdy zostanie na niego nałożony focus. Dzieje się to na przykład gdy klikniemy na pole input lub też przechodzimy po stronie dzięki przycisku tab. Dzięki odpowiedniemu wykorzystaniu tej klasy pomagamy użytkownikom w poruszaniu się po stronie.
- Element:first-child
First-child pozwala przypisać styl do pierwszego dziecka danego typu dla danego rodzica. Może być wykorzystywany z selektorami położenia które zostały opisane przed chwilą lub też samodzielnie np..:
Styl: div > h1:first-child
html
<div>
<h1>Ten zostanie ostyloway</h1>
<h1>Ten już nie</h1>
</div>
<h1>Ten już nie</h1>
To by było na tyle w pierwszej części posta. Początkowo chciałem opisać wszystkie dostępne selektory w jednej części ale jak zobaczyłem ile tego wychodzi to uznałem, iż lepiej będzie to podzielić. W następnym poście będzie ciekawiej ponieważ opisze seleketory klasy 3 oraz postaram się opisać te nadchodzące z klasy 4.
