10 CSS-селекторов, которые должен знать каждый разработчик
Что первым делом для любого веб-сайта производит хорошее впечатление на пользователя? …
Да… это пользовательский интерфейс любого веб-сайта. Каждый разработчик знает, насколько важно создать красивый дизайн для взаимодействия пользователей с любым веб-сайтом. Разумное оформление веб-страниц за минимальное время - непростая задача, если у вас нет хорошего знания CSS и его селекторов. Селекторы CSS нацелены на указанные элементы в документе HTML и помогают разработчикам применять стили к веб-страницам. Возможно, вы знакомы с некоторыми базовыми селекторами CSS, но немного больше, чем базовые знания, помогут быстрее достичь вашей цели. Использование правильных селекторов CSS минимизирует объем кода, делает его более читабельным и упрощает поддержку CSS в будущем.
Доступно множество селекторов CSS. Давайте обсудим некоторые важные из них, которые упростят вашу работу во фронтенд-разработке.
1. Селектор элемента или группы
Это один из самых простых селекторов для использования в CSS. Селектор элементов позволяет вам выбрать и придать стиль всем элементам с одним и тем же указанным именем элемента. Если есть несколько элементов с одинаковыми определениями стиля, вы можете сгруппировать все элементы и применить стиль ко всем из них вместе. Таким образом вы можете свести к минимуму код, потому что вам не придется использовать класс для каждого из элементов.
Пример 1. Здесь весь абзац на странице будет выровнен по правому краю, с желтым цветом текста.
п {
выравнивание текста: вправо;
красный цвет;
}Пример 2: Теперь посмотрим на следующий код CSS…
h2 {
выравнивание текста: центр;
цвет: желтый;
}
h3 {
выравнивание текста: центр;
цвет: желтый;
}
п
выравнивание текста: центр;
цвет: желтый;
}Вы можете минимизировать приведенный выше код с помощью селектора групп и написать тот же код, что и ниже:
h2, h3, p {
выравнивание текста: центр;
цвет: желтый;
}2. Селектор #id
Селектор id - еще один самый мощный селектор в CSS. Использование символа #, за которым следует имя идентификатора, позволяет настроить таргетинг по идентификатору и применить стиль ко всем указанным элементам с выбранным идентификатором. Использование этого селектора звучит хорошо из-за его простоты, но имейте в виду, что идентификатор должен быть уникальным для всей веб-страницы. Это означает, что вам не разрешено назначать селектор идентификаторов для нескольких элементов. Если вы не назначите уникальный идентификатор, вы столкнетесь с проблемами при манипулировании определенным элементом в JavaScript. Кроме того, ваш код не будет проверен W3C, и вы столкнетесь с проблемами совместимости в разных браузерах. Поэтому вместо создания множества классов использования # id или любой другой логики для стилизации, иначе будет сложно поддерживать ваш CSS позже.
Пример:
#коробка{
ширина: 250 пикселей;
высота: 250 пикселей;
фон: желтый;
}3. Селектор .class
Селектор классов - это наиболее полезный общий селектор, используемый разработчиками. Вы можете определить селектор класса, используя точку (.), За которой следует имя класса. Он придает стиль всем элементам с указанным атрибутом класса. Он похож на селектор id, но с той лишь разницей, что селектор класса позволяет вам выбирать несколько элементов на странице. Вы также можете использовать несколько классов (разделенных пробелом) в элементах HTML.
Пример 1:
.центр{
выравнивание текста: центр;
цвет: желтый;
}Пример 2: В приведенном ниже примере будут затронуты только элементы p с классом center.
p.center {
выравнивание текста: центр;
цвет: желтый;
}4. Селектор атрибутов
Используя селектор атрибутов, вы можете выбрать все элементы по имени или значению данного атрибута и применить к ним стиль.
Пример 1. Ниже приведен пример строки HTML с атрибутом rel и значением newfriend.
<h3 id = "title" class = "friend" rel = "newfriend"> Дэвид Уолш </h3>
Давайте посмотрим, как использовать селектор атрибутов для атрибута rel в строке выше.
h3 [rel = "newfriend"] {
цвет: желтый;
}Этот селектор часто используется разработчиками в коде для элемента checkbox. Прочтите пример, приведенный ниже.
Пример 2:
input [type = "checkbox"] {
цвет: фиолетовый;
}Он также часто используется для тегов привязки в коде. Прочтите пример, приведенный ниже.
Пример 3:
Заголовок] {
красный цвет;
}Комбинаторы: Эти используются для применения стиля к элементам html с помощью отношения между селекторами. Комбинаторы позволяют смешивать простые селекторы и применять логику между ними. Давайте обсудим четыре различных селектора комбинатора в CSS.
- Селектор потомков
- Дочерний селектор
- Селектор соседних братьев и сестер
- Общий селектор братьев и сестер
5. Селектор потомков
Селектор потомков применяет стиль только к тем элементам, которые являются потомками указанного элемента. Этот селектор очень полезен, когда вам нужно применить стиль только к некоторым конкретным элементам. Например, что, если вместо таргетинга на все теги 'h2' вам нужно настроить таргетинг только на 'h2', которые являются частью только тега 'div'. Это случаи, когда вы можете использовать селекторы потомков.
Пример 1:
div h2 {
цвет фона: зеленый;
}Пример 2: Вы также можете создать цепочку и использовать селектор потомков.
ol li a {
цвет фона: зеленый;
}Пример 3: В приведенном ниже примере вы можете смешать его с селектором классов.
.box a {
цвет: зеленый;
}6. Дочерний селектор
Селектор Chile позволяет вам выбирать все элементы, которые являются дочерними элементами указанного элемента.
Пример 1:
div> h1 {
цвет фона: зеленый;
}Разница между селектором потомков и селектором потомков состоит в том, что последний будет выбирать только прямых потомков.
Пример 2:
CSS:
охватывать {
цвет фона: белый;
}
div> span {
цвет фона: желтый;
}HTML:
<div> <span> Промежуток №1 в div. <span> Span # 2 в диапазоне, который находится в div. </span> </span> </div> <span> Промежуток №3, вообще не в div. </span>
Результат:
Пример 3: у вас есть 'ul', в котором есть некоторые элементы, и внутри этих элементов есть новые 'ol' элементов, вы можете выбрать определенный стиль только для элементов списка более высокой иерархии, но не для элементов вложенного списка .
CSS:
ul> li {
border-top: сплошной красный 5 пикселей;
}HTML:
<ul>
<li> Неупорядоченный элемент </li>
<li> Неупорядоченный элемент
<ol>
<li> Пункт 1 </li>
<li> Пункт 2 </li>
</ol>
</li>
</ul>Результат:
7. Смежные и общие родственные селекторы
Соседний означает «непосредственно следующий». Этот селектор используется, когда вы хотите выбрать элементы, которые следуют сразу за указанным элементом (соседние братья и сестры). Другими словами, он выбирает элемент, который находится рядом с другим элементом на том же уровне иерархии.
Пример: в примере ниже выберите элемент p, который следует непосредственно за элементом div.
CSS:
div + p {
цвет фона: красный;
}HTML:
<div> <p> Абзац 1 в div. </p> <p> Абзац 2 в div. </p> </div> <p> Абзац 3. Не в div. </p> <p> Абзац 4. Не в div. </p>
Результат:
Общие одноуровневые селекторы (~) менее строги, чем смежные одноуровневые селекторы. Это позволяет вам выбрать все элементы, которые являются братьями и сестрами указанного элемента, даже если они не являются непосредственно смежными.
Пример: пример ниже выбирает все элементы 'p', которые являются братьями и сестрами элементов 'div'.
CSS:
div ~ p {
цвет фона: красный;
}HTML:
<p> Пункт 1. </p> <div> <p> Пункт 2 </p> </div> <p> Пункт 3 </p> <span> GeeksforGeeks </span> <p> Пункт 4. </p>
Результат:
8. Звездочка *
Его также называют универсальным селектором (*), он выбирает все в документе и применяет к ним стили. По умолчанию ваш браузер уже определяет стиль элемента, и когда вы хотите сбросить стили браузера по умолчанию, вы можете использовать звездочку. Например, вместо использования стиля вашего браузера по умолчанию, такого как поля, отступы, выравнивание текста или размер шрифта, вы можете определить собственный стиль для всех элементов своей веб-страницы.
Пример 1:
* {
выравнивание текста: центр;
цвет: зеленый;
маржа: 0;
отступ: 0;
размер шрифта: 30 пикселей;
граница: 0;
}Пример 2: Выберите все элементы внутри элементов <div> и установите для них красный цвет фона.
div * {
цвет фона: красный;
}Вы заметили, что когда вы используете другие селекторы, такие как «class», «element» или «id», они уже подразумевают селектор звездочки?
h1 {
...
}
похоже на
* h1 {
...
}Обычно рекомендуется использовать в коде меньше селектора * или использовать его для тестирования только потому, что он добавляет ненужный слишком большой вес браузеру.
9. Псевдоклассы и псевдоэлементы.
Если вы хотите стилизовать элемент на основе состояния указанного элемента, вы можете использовать для этого псевдоклассы (:). Например, вы можете применить стиль к элементу, когда пользователь наводит курсор на него, когда пользователь посещает или наводит ссылку, когда элемент получает фокус. Таким образом, этот селектор полезен для применения стилей на основе состояний элементов. Давайте посмотрим на синтаксис и пример.
Синтаксис:
selector: pseudo-class {
стоимость имущества;
}Пример 1. Прочтите приведенный ниже код, чтобы изменить цвет кнопки при наведении на нее указателя мыши.
button: hover {
цвет: зеленый;
}Пример 2:
ссылка {
красный цвет;
}
/ * посещенная ссылка * /
а: посетил {
цвет: зеленый;
}Пример 3:
input [type = radio]: проверено {
граница: 2 пикселя сплошного зеленого цвета;
}Псевдоэлемент (: :) позволяет применить стиль к определенной части или фрагменту выбранного элемента. Например, стилизуйте первый символ или строку элемента.
Синтаксис:
selector :: псевдоэлемент {
стоимость имущества;
}Пример 1: :: first-line может использоваться для изменения шрифта первой строки абзаца.
p :: first-line {
цвет: зеленый;
размер шрифта: 1.2em;
текст-преобразование: прописные буквы;
}Пример 2: Псевдоэлемент также можно комбинировать с классами CSS. Прочтите пример, приведенный ниже
p.intro :: first-letter {
красный цвет;
размер шрифта: 1.2em;
font-weight: жирный;
}Пример 3: Псевдоэлемент также можно использовать для вставки содержимое до или после содержимого элемента. Прочтите приведенный ниже пример, в котором перед содержимым каждого элемента h1 вставляется изображение.
h1 :: before {
содержание: url (abc.gif);
}10. nth-of-type и nth-child
Рассмотрим сценарий, в котором у вас есть четыре неупорядоченных списка. Если вы хотите применить CSS только к третьему элементу ul и у вас нет уникального идентификатора для подключения, вы можете использовать nth-of-type (n). В основном : селектор nth-of-type позволяет вам выбрать каждый элемент, который является указанным n-м дочерним элементом указанного типа его родительского элемента. n может быть любым числом, ключевым словом или формулой, которая будет определять положение элемента среди группы братьев и сестер. Если объяснение по-прежнему кажется сложным, давайте разберемся на примере.
Пример 1: В примере, приведенном ниже, стиль: nth-of-type влияет только на третий 'li'.
CSS:
li: nth-of-type (3) {
красный цвет;
}HTML:
<ul> <li> Первый элемент. </li> <li> Второй элемент. </li> <li> Третий пункт. </li> <li> Четвертый пункт. </li> </ul>
Результат:
Синтаксис:
: nth-of-type (число) {
объявления css;
}Селектор: nth-child (n) соответствует каждому элементу, который является n-м дочерним элементом, независимо от типа, своего родителя. n может быть числом, ключевым словом или формулой, которая будет определять положение элемента среди группы братьев и сестер.
Пример 1:
CSS:
p: nth-child (3) {
фон: желтый;
}HTML:
<p> Первый абзац. </p> <p> Второй абзац. </p> <p> Третий абзац. </p> <p> Четвертый абзац. </p>
Результат:
Пример 2:
p: nth-child (2n) {
фон: желтый;
}Пример 3: Вы также можете связать несколько дочерних элементов nth вместе для разных элементов с одинаковым стилем.
div: nth-of-type (4) p: nth-of-child (3) {
красный цвет;
}