Освоение селекторов CSS: подробное руководство

Комплексное руководство

Каскадные таблицы стилей (CSS) — это фундаментальный язык, используемый для стилизации веб-страниц с целью улучшения их внешнего вида. Он не только улучшает внешний вид веб-страниц, но также точно определяет и стилизует определенные элементы HTML.

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

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

Что такое CSS-селекторы?

Селекторы CSS — это компоненты CSS, которые позволяют точно нацеливать и применять стили к определенным элементам HTML на веб-странице. Они определяют, на какие элементы HTML-документа будут влиять определенные правила CSS.

По сути, селекторы выбирают элемент HTML и применяют стиль конкретно к этому элементу.

Теперь давайте узнаем о различных типах селекторов CSS.

Базовые селекторы

В базовых селекторах есть следующие типы селекторов.

Выбор элемента

Селектор элементов выбирает элементы на основе их имени тега.

Например, задайте красный цвет текста для всех элементов <h1>.

h1 {
  color: red;
}

Другой пример: выровняйте все элементы <p> по центру.

p {
  text-align: center;
}

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

Селектор классов выбирает элементы на основе их атрибута class. Чтобы выбрать элементы по именам классов, используйте . непосредственно перед именем класса.

Например:

<h1 class="heading">This is a heading.</h1>
<p>This is a heading.</p>
<h2 class="heading">This is a also a heading.</h2>

Теперь выделим все элементы с классом «заголовок».

.heading{
  color: red;
}

Это изменит цвет текста всех элементов, имеющих класс «заголовок».

Селектор идентификатора

Поскольку идентификатор элемента уникален на странице, селектор идентификатора выбирает один элемент с определенным атрибутом id.

Чтобы выбрать элемент с его конкретным id, используйте символ # перед именем идентификатора.

Например:

<h1 id="heading">This is a heading.</h1>
<p>This is a heading.</p>

Теперь мы выберем конкретный элемент с идентификатором «заголовок».

#heading{
  color: red;
}

Универсальный селектор

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

Например:

* {
  margin: 0;
  padding: 0;
}

Это установит поля и отступы всех элементов на 0.

Комбинаторы

У нас есть следующие типы комбинаторов.

Комбинатор потомков

Комбинатор потомков выбирает элементы, которые являются потомками указанного родительского элемента.

Но что такое потомки?

Позволь мне объяснить.

Потомок — это просто элемент, находящийся внутри другого элемента. Например:

<div>
   <h1>This is a heading.</h1>
</div>

Здесь <h1> является потомком <div>.

Теперь вернемся к комбинатору потомков.

Комбинатор потомков выбирает элементы, которые являются потомками указанного родительского элемента. Ключевая идея здесь заключается в том, что вам не следует беспокоиться о том, насколько глубоко вложены элементы-потомки внутри родителя. Независимо от того, находятся ли они непосредственно внутри родительского элемента или на несколько уровней глубже, вы можете настроить таргетинг на все из них.

Чтобы выбрать потомка, напишите имя tag, атрибут class или атрибут id родительского элемента и после пробела напишите имя потомка.

Например:

<section>
    <p>This is a paragraph.</p>
    <div>
      <p>This is another paragraph.</p>
    </div>
</section>

CSS:

section p {
  font-size: 20px;
}

Это изменит font-size всех элементов <p> внутри элемента <section>, независимо от их уровня вложенности.

Что, если за пределами элемента <section> есть еще один элемент <p>?

<section>
    <p>This is a paragraph.</p>
    <div>
      <p>This is another paragraph.</p>
    </div>
</section>
<p>This is a paragraph outside the section element.</p>

Тогда font-size: 20px; не будет применяться к <p> за пределами элемента <section>.

Комбинатор потомков выбирает только те элементы, которые находятся внутри родительского элемента.

Выбрать с помощью class атрибута:

<section class="header">
   <p>This is a paragraph.</p>
   <p>This is another paragraph.</p>
</section>

CSS:

.header p {
  font-size: 20px;
}

Выбрать с помощью id атрибута:

<section id="header">
   <p>This is a paragraph.</p>
   <p>This is another paragraph.</p>
</section>

CSS:

#header p {
  font-size: 20px;
}

Детский комбинатор

Дочерний комбинатор выбирает элементы, которые являются прямыми дочерними элементами указанного родительского элемента.

Чтобы выбрать прямой дочерний элемент, используйте знак> между родительским и дочерним элементом.

Например:

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

CSS:

ul > li {
  font-weight: bold;
}

Давайте возьмем другой пример.

<section>
    <p>This is a paragraph.</p>
    <div>
      <p>This is another paragraph.</p>
    </div>
</section>

Теперь мы хотим изменить цвет текста элемента <p> элемента <section>.

section > p {
  color: red;
}

Изменится ли цвет текста <p> внутри элемента <div>?

Этого не будет.

Поскольку мы использовали знак > между <section> и <p>, этот стиль будет применяться только к прямому дочернему элементу <p> элемента <section>.

Соседний одноуровневый комбинатор

Комбинатор смежных одноуровневых элементов выбирает элемент, которому непосредственно предшествует определенный одноуровневый элемент.

Проще говоря, комбинатор смежных одноуровневых элементов выбирает элемент, который является непосредственным одноуровневым элементом указанного элемента, и между ними не должно быть никаких других элементов.

Соседний одноуровневый комбинатор обозначается знаком «+».

Например:

<h1>This is first heading.</h1>
<h2>This is second heading.</h2>
<h2>This is another second heading.</h2>

Теперь мы хотим изменить цвет текста первого элемента <h2>, а не всех элементов <h2>. Затем мы можем использовать комбинатор соседних одноуровневых элементов.

h1 + h2{
  color: red;
}

Вышеупомянутый стиль изменит цвет только элемента <h2>, который является непосредственным родственным элементом элемента <h1>, что означает, что он идет сразу после элемента <h1>, и между ними не должно быть никаких других элементов.

Общий комбинатор одноуровневых элементов

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

Общий одноуровневый комбинатор представлен символом ~.

Например:

<p>I'm sibling paragraph of div.</p>
<div>
   <p>This is a paragraph inside a div.</p>
   <p>This is another paragraph inside a div.</p>
</div>
<p>I'm sibling paragraph of div.</p>
<h6>I'm sibling heading of div.</h6>
<p>I'm sibling paragraph of div.</p>

Теперь предположим, что мы хотим стилизовать все дочерние элементы <p> элемента <div>, которые идут после элемента <div>.

div ~ p {
  color: red;
}

Вышеупомянутый стиль не изменит стиль элемента <p>, который находится перед элементом <div>, поскольку общий комбинатор родственных элементов выбирает одноуровневые элементы, которые идут после указанного элемента, и здесь указанным элементом является <div> .

Псевдо-класс

Псевдокласс используется для определения особого состояния элемента, что означает стилизацию элемента, когда пользователь наводит на него указатель мыши, или стилизацию элемента, когда он получает фокус и т. д.

Синтаксис псевдокласса:

element:pseudo-class {
  property: value;
}

Теперь давайте взглянем на некоторые псевдоклассы.

- Интерактивные состояния

:наведите курсор

Выбирает элемент, когда пользователь наводит на него указатель мыши.

Например:

<button>Hover over me!</button>

CSS:

button:hover {
  background-color: black;
  color: #fff;
}

:активный

Выбирает элемент, когда пользователь нажимает на него.

Например:

<a href="/">Click me!</a>

CSS:

a:active {
  color: red;
}

:фокус

Выберите элемент, который находится в состоянии фокуса.

<input type="text">

CSS:

input:focus {
  background-color: red;
}

:посетил

Оформление посещенных ссылок.

<a href="/">Click me!</a>

CSS:

a:visited {
  color: purple;
}

- Стилизация элементов формы

:неполноценный

Вы можете стилизовать отключенные входы по-разному, используя псевдокласс :disabled.

<input type="text" disabled />

CSS:

input:disabled {
  border-color: red;
}

:включено

Вы можете стилизовать включенные входы по-разному, используя псевдокласс :enabled.

<input type="text" />

CSS:

input:enabled {
  border-color: green;
}

:проверено

Вы можете стилизовать входные данные после проверки с помощью псевдокласса :checked.

<input type="checkbox" />
<input type="radio" />

CSS:

input:checked {
  height: 30px;
  width: 30px;
}

- Стилизация дочерних элементов

:first-child и :last-child

Вы можете стилизовать первый дочерний элемент и последний дочерний элемент родительского элемента, используя псевдоклассы :first-child и :last-child соответственно.

Например:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

CSS:

ul li:first-child{
  color: purple;
  font-size: 20px;
}
ul li:last-child{
  color: indigo;
  font-size: 30px;
}

:nth-child()

:nth-child() позволяет выбирать определенные дочерние элементы в зависимости от их положения.

Например:

<div>
    <p>This is first paragraph.</p>
    <p>This is second paragraph.</p>
    <p>This is third paragraph.</p>
    <p>This is fourth paragraph.</p>
    <p>This is fifth paragraph.</p>
</div>

CSS:

/* This will change the color of p at second position. */
div p:nth-child(2) {
  color: red;
}
/* This will change the color of p at fourth position. */
div p:nth-child(4) {
  color: green;
}
/* This will change the color of every p at odd number position. */
div p:nth-child(odd) {
  color: yellow;
}
/* This will change the color of every p at even number position. */
div p:nth-child(even) {
  color: blue;
}

Вы можете попробовать все вышеперечисленные стили один за другим.

:n-типа()

:nth-of-type() сужает выбор до определенного типа элемента.

Например:

<div>
    <p>This is first paragraph.</p>
    <p>This is second paragraph.</p>
    <p>This is third paragraph.</p>
    <p>This is fourth paragraph.</p>
    <p>This is fifth paragraph.</p>
</div>

CSS:

/* This will change the color of p at multiple of 2 positions. For example: 2, 4, 6... */
div p:nth-of-type(2n) {
  color: red;
}
/* This will change the color of p at multiple of 5 position. For example: 5, 10, 15... */
div p:nth-of-type(5n) {
  color: green;
}

:нет()

Псевдокласс :not() используется для исключения определённых элементов из стилизации.

Например:

<div>
   <p>This is first paragraph.</p>
   <p>This is second paragraph.</p>
   <p class="third">This is third paragraph.</p>
   <p>This is fourth paragraph.</p>
</div>

CSS:

div p:not(.third) {
  color: red;
}

Это изменит цвет всех элементов <p>, за исключением элемента <p>, который имеет класс с именем third.

Псевдоэлементы

Псевдоэлемент используется для применения стилей к указанным частям элемента. Например, задайте стиль первой буквы или первой строки элемента и вставьте содержимое до или после содержимого элемента.

Синтаксис:

element::pseudo-element {
  property: value;
}

::до

Используется для вставки содержимого перед содержимым выбранного элемента.

<blockquote>This is a quote.</blockquote>

Вы можете вставить знак " перед текстом, используя :before.

blockquote::before {
  content: '"';
}

::после

Используется для вставки содержимого после содержимого выбранного элемента.

<blockquote>This is a quote.</blockquote>

Вы можете вставить знак " после текста, используя :after.

blockquote::after {
  content: '"';
}

::первая линия

Используется для изменения стиля первой строки текста.

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, dolorum
  similique, aliquid repellat beatae vero aliquam quis magnam, laboriosam
  cum eligendi quo harum reiciendis at fugit soluta quos nisi suscipit!
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, dolorum
  similique, aliquid repellat beatae vero aliquam quis magnam, laboriosam
  cum eligendi quo harum reiciendis at fugit soluta quos nisi suscipit!
</p>

CSS:

p::first-line{
  color: red;
}

::первое письмо

Используется для изменения стиля первой буквы текста.

<p>This is a paragraph.</p>

CSS:

p::first-letter{
  color: red;
}

::маркер

Используется для изменения стиля маркера элемента списка.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

CSS:

::marker {
  color: green;
}

::выбор

Используется для изменения стиля выделенного текста.

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, dolorum
  similique, aliquid repellat beatae vero aliquam quis magnam, laboriosam
  cum eligendi quo harum reiciendis at fugit soluta quos nisi suscipit!
</p>

CSS:

::selection {
  color: white;
  background-color: purple;
}

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

Атрибуты элементов HTML предоставляют дополнительную информацию об элементе HTML. Вы можете стилизовать элементы, нацелив их на атрибуты.

[атрибут]

Выбирает элементы по их атрибутам.

Пример:

<input type="text" />
<input type="email" name="email" id="email" required />

CSS:

input[required] {
  border-color: blue;
}

[атрибут=значение]

Выбирает элементы по имени и значению атрибута.

Пример 1:

<input type="text" />
<input type="email" name="email" id="email" />

CSS:

input[type="email"] {
  border: 1px solid blue;
}

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

Пример 2:

<a href="/">Click me!</a>
<a href="/" target="_blank">Click me!</a>

CSS:

a[target="_blank"] {
  text-decoration: overline;
}

[атрибут~=значение]

Выбирает элементы, содержащие целое слово. Например:

<p>This is paragraph.</p>
<p class="special">This is paragraph.</p>
<p>This is paragraph.</p>

CSS:

p[class~="special"] {
  color: blue;
}

Это изменит цвет элемента <p>, содержащего имя класса special.

[атрибут*=значение]

Выбирает элементы, содержащие подстроку слова. Например:

<img src="logo.png" alt="logo" />
<img src="image.png" alt="picture" />
<img src="logo.png" alt="logo" />

CSS:

img[src*="logo"] {
  border: 2px solid red;
}

Это изменит стиль всего элемента изображения, который содержит «логотип» в значении атрибута src.

[attr$=значение]

Выбирает элементы со значением атрибута, оканчивающимся определенным словом. Например:

<img src="logo.png" alt="logo" />
<img src="image.png" alt="picture" />
<img src="logo.jpg" alt="logo" />

CSS:

img[src$=".png"] {
  border: 2px solid red;
}

Это изменит стиль всех элементов изображения, значение атрибута src которых заканчивается на «.png».

[атрибут^=значение]

Выбирает элементы со значением атрибута, начинающимся с определенного слова. Например:

<a href="www.example.com">Example</a>
<a href="https://example.com">Example</a>

CSS:

a[href^="https:"] {
  color: red;
}

Это изменит стиль всех элементов <a>, значение атрибута href которых начинается с «https:».

Группировка селекторов

Вы можете сгруппировать несколько селекторов, чтобы применить к ним один и тот же стиль.

Например:

<h1>This is first heading.</h1>
<h2>This is second heading.</h2>
<h3>This is third heading.</h3>
<p>This is paragraph.</p>

CSS:

h1, h2, p{
  color: purple;
  font-style: italic;
}

Заключение

В этом посте мы узнали о селекторах CSS для стилизации элементов нашей веб-страницы с использованием различных типов селекторов.

Мы разделили селекторы на базовые селекторы, комбинаторы, псевдоклассы, псевдоэлементы и селекторы атрибутов.

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

Спасибо за прочтение.

Чтобы увидеть больше подобного контента, нажмите здесь!

Продолжайте кодировать!

Спасибо, что дочитали до конца. Пожалуйста, подумайте о том, чтобы подписаться на автора и эту публикацию. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире