CSS селектори и техните типове

CSS селекторите са специфична CSS структура, която ви позволява да изберете конкретен елемент в HTML кода и да го оформите. Всеки от тях има своя собствена специфичност, т.е. може да се припокрива с други, по-слаби свойства.

CSS селектор по маркер и клас

Най-простите селектори са с етикет и по клас. Селекторът на етикети е най-често срещаният и избира всички елементи с определен маркер. Например, в свойствата можете да напишете следния CSS код: “p {color: blue}”, където “p” е маркер на абзаца, а свойството “color: blue” означава цвета на текста. В резултат текстът във всички параграфи ще стане син. Селекторите за маркери могат да бъдат разделени със запетаи, след което няма да е необходимо да пишете имота два пъти.

Ако на някои параграфи е присвоен клас, например „синьо“, тогава отговорът на CSS селектора може да бъде конфигуриран още по-прецизно. Но вписването му в свойствата ще бъде различно - пред името на класа ще се появи точка. Това означава, че за да изберете всички абзаци, на които е присвоен "синия" клас и да ги оцветите в синьо, трябва да напишете следния код в CSS свойствата: ".blue: {color: blue}". Този селектор е по-специфичен от CSS селектора по етикет и е по-силен от него, но е един от най-простите. Има по-сложни правила, които ви позволяват да избирате малки групи от елементи.

Разполага със селектори по ID

Селекторите по id или id са по-специфични, отколкото по клас и по атрибут. Това означава, че когато се използва в каскада, те ще "надхвърлят" други подобни селектори. Идентификаторите също помагат за точното определяне на конкретен елемент в кода, но използването им в дизайна на страниците се счита за лоша практика сред уеб дизайнерите. Тази практика е приемлива само в много редки случаи, например при създаването на плъзгач на CSS. Факт е, че в рамките на една страница може да има само един елемент с конкретен идентификатор. Следователно, поради уникалността на CSS селектора с id, той може да се използва само за един елемент. В този случай е много по-логично да се използват класове, а не идентификатори.

Различни мнения за селектора за идентификация

Съществува и обратното мнение, че идентификаторът помага да се определи кодовия фрагмент на страницата, който трябва да бъде в едно копие. В същото време, въпреки че класовите селектори могат да го заменят, те трябва да се използват за големи групи елементи, а в местата, където се изисква прецизност, е по-добре да се използва id. Всяка пишеща машина има право да развие личното си мнение по този въпрос и да напише код в свой собствен стил. Когато пишете селектор на идентификатора пред него, се използва символът "#". Това означава, че редът на кода ще изглежда така: "#blue: {color: blue}". С такъв запис, елементът с идентификатор "#blue" ще бъде боядисан в синьо.

Каскадна употреба

Когато използвате CSS селектори по id в HTML, можете да използвате и каскадното свойство. Например, ако трябва да изберете някакъв маркер за дете вътре в маркера с идентификатор и да промените неговите свойства, първо трябва да напишете името на идентификатора с мрежа, след това детето и неговите свойства. Такива селектори се наричат ​​вложени. Това означава, че редът на кода ще изглежда по следния начин: "#id p {color: blue}". Тогава вътре в родителския елемент с този идентификатор в абзаца дете, цветът на текста се променя на син.

Използване на селектори за деца

Друга опция за използване на каскадата за промяна на свойствата на дъщерните елементи се използва, ако трябва да изберете само определена част от кода. Той също се нарича селектор на потомък. Например, за да изберете абзац в ред от таблица, използвайте следния запис в CSS селектора: “ul li> p: {color: blue}”. Струва си да се обърне внимание на факта, че колкото по-дълъг е записът, толкова по-голяма е вероятността да промените някаква специфична характеристика на елемента, тъй като тя става по-приоритетна за каскадата. Например, елементите с друго свойство на CSS селектора на клас, който е родител, няма да променят напълно техните свойства. Само определена част от текста в списъка ще бъде пребоядисана.

Селектор за сестрински елемент

Друг интересен начин за използване на каскадните е съседните CSS селектори. Те се записват като сума от селекторите: “span + a {color blue}”. В този случай съседът е този, при който има друг, който отговаря на необходимите параметри. Така, ако в кода има три елемента, тогава имотът няма да се приложи към първия от тях, защото няма съседен и всички следващи, да. Това се дължи на иконата на сумата, когато се добавят следващите селектори, а не предишните. Такъв запис помага да се намали кода и да не се пишат няколко CSS селектора за различни етикети, като се прилагат същите свойства към тях. Ако вторият елемент от списъка също е настроен на клас, а записът е променен на ".class + a {color blue}", тогава от него ще започне обратното броене и свойствата ще бъдат променени за следващите елементи, съответстващи на правилото, и първите две ще останат същите.

Сега да предположим, че в нашия код има три еднакви маркера с различни класове и трябва да изберете всички елементи след някакъв специфичен. В този случай, прилагането само на селектори за CSS тагове няма да помогне. За да направите това, използвайте следния селектор: ".class ~ div". Това избира елементи с тагове div, които следват указания клас. Ако искаме да изберем не само елементи с тагове div, но и всички следващи, вместо етикет след знак за тилда, трябва да поставим звездичка - “*”. Такъв запис ще означава, че трябва да изберете всичко, което следва след даден клас. Можете да изберете всички елементи на страницата като цяло, ако оставите само звездичка като селектор.

Селектори за атрибути на CSS

Да предположим, че в нашия код има елементи с някои атрибути, но всички те се различават един от друг и са написани с тире, а ние трябва да изберем всички онези, чието име на класа започва с определена дума, например, “селектор”, и класовете са разделени. знак "-". Какво да направите в този случай? Селекторният запис започва с квадратни скоби, където името на атрибута се записва първо, след това вертикалната наклонена черта, знаците “=” и “selector”: “data- | = selector”. След това напишете желаното свойство, което искате да промените. В резултат се избира елемент с посочените параметри. Смяна на класовете, можете да промените свойствата на някои части от кода. Ако имената на класовете се пишат не с тире, а с една дума, те могат също да бъдат избрани, но с малко по-различен запис. В този случай вертикалната наклонена черта се заменя със символа „^“: „данни ^ = селектор“. Този селектор избира подстрока с началото на името на класа.

Как да изберете елемент с определен край в името на класа

Сега ще действаме по различен начин и ще изберем части от кода не в началото на описанието на класа, а с последните букви в неговото име. За това се нуждаем от иконата за долар. Поставяме го на мястото на отметката и след знака за равенство пишем края на името на класа: “data $ = ctor”. Елементи с тази комбинация от букви ще изберат определени свойства и ще ги приложат. Можете да изберете всеки атрибут. Нека анализираме какво да направим, ако трябва да намерим елемент с комбинация от букви в средата на една дума. В този случай променяме знака за долар на звездичка, а след знака за равенство пишем необходимите букви: “data * = ct”.

Псевдокласи - специални селектори

За връзки обикновено се използват специални CSS стилови селектори, които показват техните различни състояния: спокоен, фокусиран, активен, преминат - те се наричат ​​псевдокласове. Псевдокласата за активната връзка, върху която сочи курсора, е написана по следния начин: “a: active”. Освен това има някои свойства, най-често се променя фона или се добавя сянка. Ако добавите това свойство за връзка и кликнете върху него, той променя цвета си на посочения. Друг псевдоклас - hover показва, че връзката вече е преминала. Написано е по следния начин: „a: hover“.

Характеристики на активните и фокусираните държави

Активният често се бърка с друго състояние - фокус. Той се записва по следния начин: “a: focus” и показва активното състояние на бутона при работа от клавиатурата. Това означава, че ако използвате клавиша TAB, активната връзка ще бъде маркирана със специален цвят. Това свойство трябва да се използва, тъй като не всички потребители могат да използват мишката за навигация в сайта. Някои от тях могат да имат лошо зрение или други здравни ограничения, така че те се движат по страницата с помощта на ключове или специални устройства. Пренебрегването на състоянието на бутона във фокуса е голям недостатък за такъв параметър в дизайна на сайта като достъпност и има значително влияние върху неговото присъствие от определена категория потребители. При нормална навигация на мишката връзката става активна и фокусирана. Следователно, когато се стилизират елементи, е важно да се обърне внимание на това.

псевдо

Псевдо-елементите ви позволяват да дефинирате специфични стилове, без да го дефинирате в самата структура HTML. Те са написани по следния начин: име на селектора, знак "::", име на псевдо-елемент. Най-често срещаните елементи са "преди" и "след". Те имат свойството "съдържание", не могат да се прилагат към вътрешни стилове. „След“ е необходимо, за да добавите съдържание след съдържанието на даден елемент. Какво точно трябва да се вмъкне се записва в свойството "съдържание". По подобен начин псевдоелементът „преди“ добавя съдържание преди съдържанието на елемента. Използването на тези специални селектори ви позволява да намалите кода и да не пишете нова структура всеки път за някаква част от него, ако трябва да добавите малък детайл към определено място в контейнера. Много често се използват при оформянето на страници и добавянето на някакви декоративни елементи. Комбинациите от всички тези опции помагат за създаването на необичайни ефекти на страницата и значително помагат на работата на дизайнера на оформлението.