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:
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:
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:
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:
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:
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
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA