Selektory CSS i ich typy

Selektory CSS to specyficzna struktura CSS, która pozwala ci wybrać określony element w kodzie HTML i nadać mu styl. Każda z nich ma własną specyfikę, tzn. Może nakładać się na inne, bardziej "słabe" właściwości.

Selektor CSS według znacznika i klasy

Najprostsze selektory są oznaczone tagiem i klasą. Selektor znaczników jest najbardziej powszechny i ​​wybiera wszystkie elementy z konkretnym znacznikiem. Na przykład możesz napisać następujący kod CSS we właściwościach: "p {color: blue}", gdzie "p" jest znacznikiem akapitu, a właściwość "color: blue" oznacza kolor tekstu. W rezultacie tekst we wszystkich akapitach zmieni kolor na niebieski. Selektory znaczników można oddzielać przecinkami, a następnie nie trzeba wpisywać właściwości dwukrotnie.

Jeśli niektórym akapitom przypisana jest klasa, na przykład "niebieska", to odpowiedź selektora CSS można jeszcze bardziej precyzyjnie skonfigurować. Ale jego wpis we właściwościach będzie inny - kropka pojawi się przed nazwą klasy. To znaczy, aby wybrać wszystkie akapity, do których przypisana jest klasa "niebieska" i pokolorować je na niebiesko, należy wpisać następujący kod we właściwościach CSS: ".blue: {color: blue}". Ten selektor jest bardziej szczegółowy niż selektor CSS według znacznika i jest silniejszy od niego, ale jest jednym z najprostszych. Istnieją bardziej złożone reguły, które pozwalają wybrać małe grupy elementów.

Zawiera selektory według ID

Selektory według id lub id są bardziej szczegółowe niż według klasy i według atrybutów. Oznacza to, że gdy są stosowane w kaskadzie, będą "przeważać" inne podobne selektory. Identyfikatory pomagają również precyzyjnie wybrać określony element w kodzie, ale ich użycie w projektowaniu stron jest uważane za złą praktykę wśród projektantów stron internetowych. Tylko w bardzo rzadkich przypadkach, na przykład podczas tworzenia suwaka na CSS, ta praktyka jest akceptowalna. Faktem jest, że na jednej stronie może istnieć tylko jeden element o określonym identyfikatorze. W związku z tym, ze względu na wyjątkowość selektora CSS według id, można go używać tylko dla pojedynczego elementu. W takim przypadku używanie klas jest o wiele bardziej logiczne, niż identyfikatory.

Różne opinie na temat selektora id

Istnieje jednak również przeciwna opinia, że ​​identyfikator pomaga zidentyfikować ten fragment kodu na stronie, który powinien znajdować się w jednym egzemplarzu. W tym samym czasie, chociaż selektory klas mogą go zastąpić, powinny być używane dla dużych grup elementów, a tam, gdzie wymagana jest precyzja, lepiej użyć id. Każda maszyna do pisania ma prawo rozwijać swoją osobistą opinię na ten temat i pisać kod w swoim własnym stylu. Podczas pisania selektora o id przed nim, używany jest symbol "#". Oznacza to, że linia kodu będzie wyglądała następująco: "#blue: {color: blue}". Przy takim zapisie element z identyfikatorem "#blue" będzie pomalowany na niebiesko.

Używanie kaskadowe

Używając selektorów CSS według id w HTML, możesz również użyć właściwości kaskadowania. Na przykład, jeśli musisz wybrać jakiś znacznik podrzędny wewnątrz znacznika z identyfikatorem i zmienić jego właściwości, musisz najpierw wpisać nazwę identyfikatora z siatką, a następnie znacznik podrzędny i jego właściwości. Takie selektory są nazywane zagnieżdżonymi. Oznacza to, że wiersz kodu będzie wyglądał mniej więcej tak: "#id p {color: blue}". Następnie wewnątrz elementu nadrzędnego z tym identyfikatorem w akapicie podrzędnym kolor tekstu zmienia się na niebieski.

Używanie selektorów podrzędnych

Inna opcja użycia kaskady do zmiany właściwości elementów podrzędnych jest używana, jeśli musisz wybrać tylko określoną część kodu. Jest również nazywany selektorem potomnym. Na przykład, aby wybrać akapit w wierszu tabeli, użyj następującego selektora CSS: "ul li> p: {color: blue}". Warto zwrócić uwagę na to, że im dłuższy zapis, tym większe prawdopodobieństwo, że będzie można zmienić jakąś określoną właściwość elementu, ponieważ staje się on bardziej priorytetowy dla kaskady. Na przykład elementy z inną właściwością selektora CSS w klasie, która jest nadrzędna, nie zmieni całkowicie ich właściwości. Tylko konkretna część tekstu na liście zostanie przemalowana.

Sister Element Selector

Innym interesującym sposobem wykorzystania kaskadowania są sąsiadujące selektory CSS. Są one rejestrowane jako suma selektorów: "span + a {color blue}". W tym przypadku sąsiadem jest ten, pod którym istnieje inny, który pasuje do niezbędnych parametrów. Jeśli więc w kodzie występują trzy elementy, właściwość nie zostanie zastosowana do pierwszego z nich, ponieważ nie ma sąsiedniego, a wszystkie kolejne - tak. Wynika to z ikony sumy, gdy dodawane są kolejne selektory, a nie poprzednie. Taki zapis pomaga zredukować kod i nie pisać kilku selektorów CSS dla różnych znaczników, stosując do nich te same właściwości. Jeśli drugi element listy zostanie również ustawiony na klasę, a rekord zostanie zmieniony na ".class + a {color blue}", rozpocznie się odliczanie, a właściwości zostaną zmienione dla kolejnych elementów pasujących do reguły, a pierwsze dwa pozostaną niezmienione.

Teraz załóżmy, że w naszym kodzie są trzy identyczne tagi z różnymi klasami i musisz wybrać wszystkie elementy po jakimś konkretnym. W takim przypadku zastosowanie tylko selektorów znaczników CSS nie pomoże. Aby to zrobić, użyj następującego selektora: ".class ~ div". Spowoduje to wybranie elementów za pomocą znacznika div zgodnego z określoną klasą. Jeśli chcemy wybrać nie tylko elementy z tagiem div, ale wszystkie kolejne, zamiast tagu po znaku tyldy, należy umieścić gwiazdkę - "*". Taki zapis oznacza, że ​​musisz wybrać wszystko, co następuje po danej klasie. Możesz wybrać ogólnie wszystkie elementy na stronie, jeśli zostawisz gwiazdkę tylko jako selektor.

Selektory atrybutów CSS

Załóżmy, że w naszym kodzie występują elementy o niektórych atrybutach, ale wszystkie różnią się od siebie i są napisane łącznikiem, i musimy wybrać wszystkie te, których nazwa klasy zaczyna się od określonego słowa, na przykład "selektor", a klasy są oddzielone znak "-". Co robić w tym przypadku? Wpis selektora rozpoczyna się od nawiasów kwadratowych, gdzie najpierw jest zapisana nazwa atrybutu, następnie pionowy ukośnik, znaki "=" i "selektor": "data- | = selector". Następnie wpisz żądaną właściwość, którą chcesz zmienić. W wyniku tego wybrany jest element o określonych parametrach. Zmieniając klasy, możesz zmienić właściwości niektórych części kodu. Jeśli nazwy klas nie są pisane łącznikiem, ale jednym słowem, można je również wybrać, ale używając nieco innego wpisu. W takim przypadku pionowy ukośnik zostanie zastąpiony symbolem "^": "data ^ = selektor". Ten selektor wybiera podłańcuch z początkiem nazwy klasy.

Jak wybrać element z określonym zakończeniem w nazwie klasy

Teraz będziemy postępować inaczej i wybierać części kodu nie na początku opisu klasy, ale przez ostatnie litery w jej nazwie. Do tego potrzebujemy ikony dolara. Umieszczamy go w miejscu zaznaczenia, a po znaku równości wpisujemy koniec nazwy klasy: "data $ = ctor". Elementy z tą kombinacją liter będą teraz wybierać określone właściwości i je stosować. Możesz wybrać dowolny atrybut. Przeanalizujmy, co zrobić, jeśli potrzebujemy znaleźć element z kombinacją liter w środku słowa. W tym przypadku zmienimy znak dolara na gwiazdkę, a po znaku równości wpisujemy niezbędne litery: "data * = ct".

Pseudo-klasy - specjalne selektory

W przypadku linków zwykle używane są specjalne selektory stylu CSS, które wyświetlają różne stany: spokojny, skupiony, aktywny, przekazany - nazywane są pseudoklasami. Pseudo-klasa dla aktywnego łącza, na które wskazuje kursor, jest zapisana w następujący sposób: "a: active". Ponadto istnieją pewne właściwości, najczęściej zmiany tła lub cień jest dodawany. Jeśli dodasz tę właściwość dla łącza i klikniesz na nią, zmieni ona kolor na podany. Kolejne pseudoklasy - kursor pokazuje, że link został już przekazany. Jest napisane tak: "a: hover".

Funkcje stanów aktywnych i fokusowych

Aktywny często mylony jest z innym państwem - skupienie. Jest rejestrowane w ten sposób: "a: focus" i wskazuje aktywny stan przycisku podczas pracy z klawiatury. Oznacza to, że jeśli użyjesz klawisza TAB, aktywny link zostanie podświetlony w specjalnym kolorze. Tej właściwości należy użyć, ponieważ nie wszyscy użytkownicy mogą poruszać się po witrynie za pomocą myszy. Niektóre mogą mieć słaby wzrok lub inne ograniczenia zdrowotne, więc poruszają się po stronie przy pomocy klawiszy lub specjalnych urządzeń. Zignorowanie stanu skupienia przycisku jest dużą wadą takiego parametru w projekcie strony internetowej jako dostępności i ma znaczący wpływ na jego obecność przez określoną kategorię użytkowników. Przy normalnej nawigacji myszy łącze staje się aktywne i skupia. Dlatego podczas stylizowania elementów należy zwrócić na to uwagę.

Pseudoelementy

Pseudoelementy pozwalają definiować określone style bez definiowania ich w samej strukturze HTML. Są one zapisane w następujący sposób: nazwa selektora, znak "::", nazwa pseudoelementu. Najbardziej powszechnymi elementami są "przed" i "po". Mają właściwość "treść", nie mogą być stosowane do stylów wewnętrznych. "Po" jest potrzebne, aby dodać zawartość po zawartości określonego elementu. To, co dokładnie należy wstawić, jest rejestrowane we właściwości "content". Podobnie pseudoelement "before" dodaje treść przed treścią elementu. Korzystanie z tych specjalnych selektorów pozwala zredukować kod i nie zapisywać nowej struktury za każdym razem, gdy zajdzie potrzeba dodania niewielkiego detalu do określonego miejsca w kontenerze. Są bardzo często używane do stylizacji stron i dodawania elementów dekoracyjnych. Kombinacje tych wszystkich opcji pomagają tworzyć niezwykłe efekty na stronie i znacznie pomagają w pracy projektanta układu.