Давайте обсудим селекторы 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>

Остается немного ресурсов, чтобы копнуть глубже

Не стесняйтесь добавлять свой ответ. Надеюсь, это поможет.