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:
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:
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:
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:
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:
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