Давайте обсудим селекторы CSS. Вы можете использовать эту статью, чтобы освежить свои навыки работы с CSS, или использовать ее как шпаргалку. Если вы новичок в CSS, эта статья предоставит вам глубокое понимание селектора CSS, комбинаторов и специфики селектора. Идеальное начало вашего пути к CSS.
Начало работы с селектором CSS
Если вы здесь, я полагаю, вы уже знаете, что означает CSS. Селекторы CSS - это лишь некоторые условия для выбора элементов на странице. Я сразу перейду к делу. Возвращаясь к синтаксису правила CSS:
some-selector { property: value; }
Список концепций CSS, которые необходимо понять, чтобы освоить селекторы CSS
- Все или Универсальный селектор
- Селектор элемента / типа
- Селектор атрибутов
- Селектор идентификатора
- Селектор класса
- Селектор псевдокласса
- Селектор псевдоэлементов
- Комбинаторы
1. Универсальный селектор:
Селектор All - самый простой. Вы указываете стиль, и он будет применен ко всем выбранным элементам.
* { color: red; } // html <div> I am red </div> <section> <h1> Yes I am also red</h1> <p> I am also red </p> I am red as well </section>
2. Селектор типа:
Селектор типа выбирает элементы по их типу. Например:
// Css div { color: red; } // html . . <div> This will be selected by 'div' selector </div> <div> This one will also be selected 'div' selector <div> This one will also be selected by 'div' selector </div> Even this one selected by 'div' selector </div> <p> But this one won't be selected by 'div' selector </p>
3. Селектор атрибутов:
Селектор атрибутов работает с атрибутами HTML. Он выбирает элементы с соответствующими атрибутами.
// Css [id="some-id"] { color: red; } [class="some-class"] { color: green; } [data-para="small"] { padding: 8px; } // html . . <div id="some-id"> This will be selected by '[id="some-id"]' as this element has the id attribute with 'some-id' value </div> <div class="some-class"> This one will also be selected by '[class="some-class"]' attribute selector </div> </div> <p data-para="small"> But this one will be selected by '[data-para="small"]' attribute selector </p>
Селектор атрибутов может выполнять точное или частичное совпадение. Точное совпадение соответствует точному значению атрибута. Мы обсудим частичное соответствие ниже:
Синтаксис частичного сопоставления:
[имя-атрибута (флаг) = «значение атрибута»]
Все частичные совпадения будут выбирать точное совпадение независимо от каких-либо флагов. (Флаг) может быть одним из следующих:
- ‘|’ При применении этого флага сопоставляются элементы с атрибутами, начинающимися со значения атрибута и сопровождаемыми дефисом. Например:
// Css [data-id|="hello"] { color: black; } // HTML <div data-id="hello"> I will be matched, as this is an exact match </div> <div data-id="hello-followed-by-hypen"> Select me as well </div> <div data-id="hello-yes select also"> Yes, you read it right </div> <div data-id="hell"> Nope, I won't be matched </div> <div data-id="hello neither I will be"> Not selected </div>
- ‘^’ Этот флаг работает как ‘|’, но более эксклюзивен. Это выбирает все элементы, атрибуты которых начинаются с заданного значения. Например:
// Css [data-id^="hello"] { color: black; } // HTML <div data-id="hello"> I will be matched, as this is an exact match </div> <div data-id="hello-followed-by-hypen"> Select me as well </div> <div data-id="hello-yes select also"> Yes, you read it right </div> <div data-id="hello dsf df"> As long as the attribute value starts with the selectos value the element will be selected </div> <div data-id="hello neither I will be"> Told you right!</div> <div data-id="No I wont be selected"> Nope </div> <div data-id="hell">Not selected</div>
- ‘~’ Этот флаг выбирает элементы, которые содержат значение атрибута в виде значения, разделенного пробелами. Например:
[data-id~="hello"] { color: black; } // HTML <div data-id="hello"> I will be matched, as this is an exact match </div> <div data-id="hello followed-by-hypen"> Select me as I have hello seperated by space </div> <div data-id="hello-yes select also"> No, You cann't match me!</div> <div data-id="hello dsf df"> I am glad to be selected </div> <div data-id="hel"> No, I am not selected!</div> <div data-id="No I wont be selected"> Nope </div>
И еще один к списку
все, что мы обсуждали до сих пор, чувствительно к регистру. Это означает, что если мой селектор - [data-name = ”hello”], тогда значение атрибута должно быть «hello» в элементе, который нужно сопоставить. Это не соответствует «Hello» или «HELLO». Добавление «i» после значения в селекторе будет соответствовать значению независимо от регистра. Таким образом, [data-name = ”hello” i] выберет все со значением атрибута от «hello», «Hello», «HEllo» до «HELLO».
Класс и идентификатор - одни из наиболее часто используемых атрибутов для стилизации в CSS. Посмотрим, как их можно использовать.
[id="some-id"] { color: red; } [class="some-class"] { color: blue; } // html <div id="some-id"> I am in red </div> <div class="some-class"> This should be in blue </div>
Поскольку класс и идентификаторы часто используются для стилизации, в CSS предоставляется простой API для выбора идентификатора и класса. Мы обсудим то же самое в следующих разделах.
3. Селектор идентификатора:
Мы уже обсуждали, как мы можем использовать селекторы атрибутов для стилизации идентификаторов и классов. Теперь мы увидим простой селектор идентификаторов, который позволяет выбрать элемент с заданным идентификатором.
// syntax for a id selector is following: // #id-name { property: value; } // Example #some-id { color: red; } // html <div id="some-id"> This will be shown in red </div>
4. Селектор класса:
Подобно селектору класса id, селектор предоставляет простой API для выбора элементов с классом.
// syntax for class selector // .some-class-name { property: value; } // Example .some-class { color: blue; } // html <div class="some-class"> This text is blue. </div>
5. Селектор псевдокласса:
Селектор псевдокласса позволяет выбрать элемент в особом состоянии, например, когда элемент наведен, или элемент активен или сфокусирован, и т. Д. Чтобы упростить выбор элемента в определенном состоянии, значит, стили будут применяться, когда этот элемент находится в данном состоянии.
// syntax for pseudo-class selector selector:state { property: value; } // following css rule are applied when a tag will be hovered over. p:hover { color: red; }
Некоторые из наиболее часто используемых состояний перечислены ниже:
- hover: выбирает элементы при наведении курсора.
- focus: выбирает элемент, который находится в фокусе.
- disabled: выбирает отключенный элемент.
- first-child: выбирает первый дочерний элемент селектора
- last-child: выбирает последний дочерний элемент селектора
- посещено: используется с тегом ссылок, выбирает все посещенные ссылки.
6. Селектор псевдоэлементов:
Эти селекторы используются для стилизации (или выбора) определенной части элемента.
// syntax selector::some-pseudo-element { property: value; } // Note the difference in syntax with pseudo-class selector
Перечисление всех псевдоэлементов:
- after: используется для вставки и стиля содержимого после заданного элемента.
- before: используется для вставки и стиля содержимого перед заданным элементом.
- first-letter: выбирает первую букву данного селектора.
- first-line: выбирает первую строку данного селектора.
- selection: выбирает контент, выбранный пользователем.
Псевдоэлементы могут быть немного запутанными для начала и могут потребовать немного поиграть, прежде чем вы почувствуете себя комфортно. Я оставлю вам некоторые ресурсы внизу статьи.
7. Комбинаторы
Все вышеперечисленные селекторы хороши. Но они просты, вы ограничены. Но теперь мощь приходит к вам с комбинаторами. Вы можете объединить более одного селектора и создать гибридный селектор. Они очень похожи на союзы в английском языке.
// Syntax selector1 some-combinator selector2 { property: value; } // following selector selects p element which are descendants of a div. Or p elements nested inside a div. div p { color: red; }
В CSS есть четыре типа комбинаторов:
- Селектор-потомок (пробел): выбирает все, что соответствует элементу selector2, который является потомком элемента selector1 или вложен внутрь элемента selector1.
- дочерний селектор (›): выбирает все, что соответствует элементу selector2, который является прямым потомком элемента selector1.
- Селектор смежного родственного элемента (+): выбирает селектор 2, который является прямым соседним родственным элементом селектора 1.
- общий родственный селектор (~): выбирает селектор 2, который является родным элементом селектора 1.
Давайте теперь посмотрим на несколько примеров.
// descendant selector: div p { color: red; } <div> <p> This will be red </p> <p> I am also red </p> <section> <p> I am also red </p> <div> <p> I am also red </p> </div> </section> </div> ----------------------------------- // child selector div > p { color: red; } <div> <p> This will be red </p> <p> I am also red </p> <section> <p> I am not red, as I am not direct children of a div</p> <div> <p> Yes, I am red. Check my parent if you don't believe. I am red only because of my immediate parent div. </p> </div> </section> </div> ----------------------------------- div + p { color: red; } <div> <p> I am not red</p> <p> I am also not red </p> <section> <p> Yes, I am red, I have an immediate div as a sibling</p> <div> <p> I am also not red </p> </div> <p> I am red again because of my adjacent sibling div </p> <p> But I am not red as you may have already guessed </p> </section> <div> P below will be red </div> <p> Yes, I am red </p> </div> ---------------------------------- div ~ p { color: red; } <div> <p> This won't be red </p> <p> I am also not red </p> <section> <p> I am red </p> <div> <p> I am not red </p> </div> <p> I am red as well. </p> <p> Surprise! I am also red. I am red because I am sibling of a div. </p> <p> Me too </div> </section> <p> If you add a div at same level as of me all, I will also be red along with first two p above. </p> </div>
8. Специфика селектора
Это одна из самых важных концепций, которую нужно изучить в CSS, но она довольно проста. Правила специфичности CSS - это правила, которые браузер использует для стилизации, когда к элементу применяются конфликтующие стили. Иерархия специфичности помогает вам лучше понять это.
Есть четыре категории, которые определяют уровень специфичности селектора:
Встроенные стили. Встроенный стиль прикрепляется непосредственно к элементу, который нужно стилизовать. Пример: ‹h1 style =” color: red; ”›.
ID - это элемент селектора Id. Или стили, примененные селектором id
Классы, атрибуты и псевдоклассы - сюда входят .classes, [attributes] и псевдоклассы, такие как: hover и т. д.
Элементы и псевдоэлементы. Сюда входят имена элементов и псевдоэлементы, такие как div,: before и: after.
Еще один момент, который следует добавить, это то, что универсальные селекторы добавляют 0 к вычислению специфичности.
Теперь вы можете использовать простую формулу для расчета специфичности правила. Прежде всего, мы присваиваем номер каждой из категорий специфичности. 0 для универсального селектора, 1 для селектора элементов и псевдоэлементов, 10 для классов, атрибутов и селектора псевдоклассов, 100 для каждого селектора id, 1000 для встроенных стилей.
Теперь вам нужно суммировать эти числа для конкретного правила стиля, в зависимости от того, какое правило имеет максимальную сумму, которую будет применен стиль. Если два правила имеют одинаковый номер специфичности, то к элементу будет применено правило, которое применяется последним.
.some-class { color: blue; } #some-id { color: red; } <div class="some-class" id="some-id"> I am red as specificity for class selector is 10 and specificity for id selector is 100. 100 > 10, so the rule with the id selector is applied. </div> ----------------------------- .some-color { color: blue; } #some-id { color: green; } #some-id.some-color { color: green; } <div class="some-class" id="some-id"> I am red as specificity for the last selector is highest. 100 for id and 10 for class = 110. </div>
Остается немного ресурсов, чтобы копнуть глубже
- Https://www.internetingishard.com/html-and-css/
- Https://www.w3schools.com/css/default.asp
- Https://developer.mozilla.org/en-US/docs/Web/CSS
- Https://css-tricks.com/snippets/css/
- Https://www.freecodecamp.org/ (это намного больше, чем вы когда-либо получали, даже сертификаты)
- Https://www.khanacademy.org/computing/computer-programming/html-css (для людей, совершенно незнакомых с HTML и CSS)
Не стесняйтесь добавлять свой ответ. Надеюсь, это поможет.