#40. Selektory atrybutu

Selektor atrybutu [attribute]

Selektory atrybutu dają nam bardzo szerokie możliwości.

Selektor [attribute], który aplikuje regułę CSS dla elementów posiadających dany  atrybut. Selektor ten może współpracować zarówno na obecność konkretnej klasy, id, bądź href, jak i innych atrybutów.

Przykładowo, [class="shoes"] wybierze elementy z klasą shoes. Jednak [class] wybierze wszystkie elementy, które w ogóle mają wyznaczoną klasę. Spójrz na poniższy przykład. Pokazałem w nim jak zmieniłem właściwości wszystkich klas oraz linków: 

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

strange-mountain-44hou

strange-mountain-44houby danielminschinski

Konstrukcja atrybutu [attribute*=value]

Selektory atrybutów dają sporę możliwości ich użycia. Poza tym, że możemy sprawdzić czy element posiada dany atrybut, możemy też sprawdzić, czy np. posiada on w sobie odpowiedni ciąg znaków.

Do tego musimy użyć następującej konstrukcji: [attribute*="value"]. Przykładowo [class*="small"] analizuje, czy element posiada klasę o nazwie zawierającej ciąg znaków small.

Przejdźmy do naszego przykładu. Pozmieniamy w nim kolory niektórych klas oraz wybranych linków:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

upbeat-curran-14vnk

upbeat-curran-14vnk danielminschinski

Selektor [attribute=value]

Wróćmy do selektora [attribute=value]. Sprawdza on występowanie konkretnej wartości. Przykładowo, [name="cats"] wybiera element o atrybucie name równym cats.

Przeanalizuj przykład:

 

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

elated-dhawan-pr34j

elated-dhawan-pr34j danielminschinski

Selektor [attribute^=value]

Kolejną możliwością którą możemy sprawdzić, jest to czy atrybut zaczyna się od konkretnej wartości. W tym celu należy użyć selektora [attribute^=value]

Przykładowo, [class^="cats"] wybiera elementy o atrybucie class którego wartość zaczyna się od ciągu znaków cats.

Używamy go przede wszystkim w przypadku w którym mamy kilka klas z tym samym przedrostkiem i chcemy im nadać wspólne style.

Spójrz na poniższy przykład z zastosowaniem nowo poznanej konstrukcji:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

runtime-dream-wioo3

runtime-dream-wioo3 danielminschinski

Selektor [attribute$=value]

Ostatni selektor który chciałbym przedstawić w tym materiale wygląda następująco: [attribute$=value].

Dzięki niemu, możemy sprawdzić, czy dany atrybut kończy się konkretną wartością. W tym przypadku pomoże znak $.

Przykładowo, [class$="com"] wybiera elementy o atrybucie class kończącym się ciągiem com.

Omawiany selektor z powodzeniem można wykorzystać w przypadku stylowania o podobnych atrybutach. Dzięki niemu możemy uniknąć dodawania zbędnych klas.

Sprawdź zastosowanie selektora na konkretnym przypadku:

 

 

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

pedantic-cookies-e9fe6

pedantic-cookies-e9fe6 danielminschinski

Temat Selektorów atrybutów uważam za zakończony. Wszystko co chciałem na chwilę obecną opisałem😉 

W następnym materiale chciałbym Wam przedstawić zadanie do wykonania. Zbudujecie kolejną stronę internetową według moich wskazówek😉 Wyćwiczyłem już sobie motywacje do przygotowywania materiałów na każdą środę, więc zapraszam w przyszłą środę na 15:00🕒 do nowego zadania‼😉

Do kolejnego😉‼

Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb

 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!