Szybka powtórka z selektorów CSS

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śli 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 każdego 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 właściwie 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śli jedną wśród tych wartości jest ta poszukiwana przez nas np.: wartość.
Element[atrybut | =“wartość”]
Ten selektor jest ciekawy 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, że 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śli jest bezpośrednim dzieckiem Elementu1. Jeśli jest gdzieś niżej w hierarchii to nie zosatnie ostylowany
Styl: p > h1

	<p>
		<h1>Ten zostanie ostyloway</h1>
		<div>
			<h1>Ten już nie</h1>
		</div>
	<p>

Element1 + Element2
Tutaj Element2 zostanie ostylowany o ile jest położony bezpośrednio po Element1 i mają wspólnego rodzica
Styl: p+h1
```
<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 za pomocą 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

<div>
	<h1>Ten zostanie ostyloway</h1>
	<h1>Ten już nie</h1>
</div>
<h1>Ten już nie</h1>

Styl: h1:first-child

<body>
	<h1>Ten zostanie ostyloway</h1>
	<h1>Ten już nie</h1>
<div>
	<h1>Ten zostanie ostyloway</h1>
	<h1>Ten już nie</h1>
	<p>
		<h1>Ten zostanie ostyloway</h1>
	</p>
</div>
</body>

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, że 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.