Шпаргалка по CSS Selector: Лучшие селекторы для фронтенд-разработки

Селекторы CSS используются для поиска элементов HTML, которые вы хотите стилизовать в своих программах. Думайте об этом как о шаблонах или кодовых словах, с помощью которых вы можете специально искать и изменять определенные аспекты вашего кода. Использование селекторов CSS ускорит жизнь вашего интерфейса и упростит быстрое редактирование кода.

Сегодня мы покажем, как реализовать все самые полезные селекторы CSS, от базовых до продвинутых псевдо-селекторов.

Давайте начнем!

Что такое CSS Selectors

Внешняя таблица стилей — это отдельный файл от вашего HTML-документа. Чтобы связать их, вам нужно будет добавить в заголовок вашего HTML-документа символ, который ссылается на созданный вами файл CSS.

Эта внешняя таблица стилей будет содержать отдельные правила CSS — блоки CSS, которые содержат селектор CSS и набор свойств CSS, называемых блоком объявления.

Селектор CSS определяет, к какому элементу HTML применить свойства.

body {  /* <-- this is the CSS Selector */
   text-align: center; /* <-- this is one CSS Property */
   margin: 0 auto;
}

И селектор CSS, и блок объявлений составляют одно правило CSS. Далее мы рассмотрим некоторые из распространенных способов выбора элементов HTML, чтобы вы могли стилизовать свои веб-страницы.

Basic Selectors

Универсальный селектор или селектор с подстановочными знаками

* {  
   box-sizing: border-box;
}

Универсальный селектор, обозначенный *значком, выбирает все на странице. Обычно этот селектор используется для указания размера поля на странице.

Селекторы тегов

p {  
   font-size: 14px;
}

Селекторы тегов выбирают элементы HTML на основе их тега. Пример здесь показывает, что все pтеги будут иметь размер шрифта 14 пикселей.

Селекторы классов

.none {  
   display: none;
}

Селекторы классов выбирают элементы HTML на основе имени их класса. Класс выбирается с помощью. символа. Пример здесь показывает, что все элементы с именем класса.noneне будут отображаться.

Селекторы ID

#container {  
   margin: 0 auto;
   padding: 0;
}

Селекторы ID выбирают элементы HTML на основе их ID. Их выбирают с помощью #. В приведенном здесь примере показано, что элемент #containerбудет иметь поля 0 autoи 0 padding.

Combinator Selectors

Селекторы комбинатора объединяют несколько основных селекторов с комбинатором, чтобы сформировать более сложные критерии выбора. Комбинатор — это символ, который указывает компилятору, как выбрать элемент HTML. Есть четыре разных типа:

Селекторы потомков

ul a {  
   text-decoration: none;
   color: black;
   cursor: pointer;

Иногда мы не хотим стилизовать весь какой-либо конкретный класс или тег, а только те, которые находятся внутри другого элемента. Селекторы потомков используют пробел для выбора конкретного потомка другого элемента. В этом примере, мы выбираем любой тег, который находится внутри неупорядоченного списка, чтобы изменить text-decoration, colorи cursor.

Селекторы дочерних комбинаторов

div > p {  
   font-size: 12px;
   color: pink;
}

Бывают случаи, когда мы специально хотим выбрать непосредственного дочернего элемента другого элемента. Дочерние селекторы используют >для выбора дочернего элемента другого элемента. В этом примере мы выбираем любой pтег, который является дочерним элементом divдля изменения размера шрифта и цвета.

Мы также можем использовать целевой дочерний элемент с помощью селекторов first-childили last-child.

p:first-child {
   color: red;
}

 

div p:last-child {

  color: red;

}

Смежные одноуровневые селекторы

div + p {  
   font-size: 12px;
   color: pink;
}

Мы используем, +чтобы указать, что нам нужен соседний элемент-брат. Соседний брат имеет тот же родительский элемент, что и первый элемент, и идет сразу после этого первого элемента. Первый элемент, указанный в соседнем селекторе соседнего элемента, сообщает компилятору, что искать. Второй элемент указывает на элемент, который мы фактически выбираем.

Прочтите этот пример как «Выбрать все теги p, которые идут сразу после divтегов». В этом примере мы выбираем любой pтег, который имеет тот же родительский элемент, что и divтег, где pтег идет сразу после div.

General Sibling Selector

div ~ p {  
   font-size: 12px;
   color: pink;
}

Вы можете использовать общий селектор одноуровневых элементов, чтобы выбрать всех одноуровневых элементов элемента. В этом примере мы выбираем любой pтег, который является родственником a, divчтобы изменить размер шрифта и цвет.

 <body>
     <p></p> <!-- the CSS selector will select this element because a div tag is one of the siblings. -->
     <div></div>
     <p></p> <!-- the CSS selector will select this element because a div tag is one of the siblings. -->
 </body>
<br>

Pseudo-Selectors

Селекторы псевдокласса

a:hover {  
   font-size: 12px;
   color: pink;
   font-weight: bold;
}

 

div:nth-child(2) {  
   background-color: red;
   color: white;
   font-weight: normal;
}

Есть времена, мы определенно хотим, чтобы стиль элемента, когда посещаются состояние элемента, парили над, активным, в центре внимания, и т.д. Мы можем использовать псевдо-селекторы класса в стиль определенных элементы, которые будут оформлены определенным образом на основе поведение или размещение. Используйте двоеточие : после элемента, который хотите стилизовать.

Селекторы псевдоэлементов

div::selection{  
   font-size: 12px;
   background-color: pink;
}
 
h1::before{  
   content: 😎;
}
h1::after{  
   content: 😎;
}

Селекторы псевдоэлементов очень похожи на селекторы псевдоклассов по способу написания. Если мы хотим, чтобы текст, который пользователь выбирает в a, divимел определенный цвет фона, мы можем стилизовать его, используя div::selection.

Обратите внимание на два двоеточия. Это было изменение по сравнению с предыдущими версиями CSS. Современный CSS использует два двоеточия, чтобы лучше различать псевдокласс и псевдоэлемент.

::beforeИ ::afterпсевдо-селекторы имеют свойство контента. Это содержимое будет вставлено до или после указанного элемента. В этом примере 😎 будет вставлен до и после h1.

Селекторы атрибутов

div[data-tab] {  
   display: none;
}
div[data-tab=“one”] {  
   display: block;
   background-color: ivory;
}

Существует два типа селекторов атрибутов : один, который указывает, только ли элемент имеет namedатрибут, и второй, который определяет именованный атрибут и значение атрибута. Этот тип селектора особенно полезен, если вы используете настраиваемые атрибуты в своем HTML.

Этот пример нацелен на объект, divкоторый имеет вкладку данных настраиваемого атрибута и displayпо умолчанию не имеет значения. Следующее правило CSS становится еще более конкретным, когда мы выбираем data-tabатрибут со значением «один» для его отображения.

Что изучать дальше

Вот и все, что касается нашей шпаргалки по селекторам CSS. Изучение этих коротких кодов значительно упростит вашу жизнь в интерфейсе, так как вы сможете искать свой код как профессионал. Обязательно держите это под рукой для своего следующего проекта CSS.

Если вы хотите продолжить изучение селекторов CSS, обратите внимание на следующие темы:

• nthселекторы типов, ( nth-last-child, nth-of-typeи т. д.)
• Селекторы строк ( first-line, last-line)
• Расширенные селекторы ( first-letter, interface-state)
• Лучшие практики селектора CSS