Селекторы CSS фото

Селектор CSS: классы, идентификаторы, типы, псевдо-классы/элементы

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

Селектор CSS фото

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

Итак, что такое селектор CSS? Если вы когда-либо писали какие-либо CSS, вы, вероятно, использовали их! Взгляните на приведенный ниже пример:

h1 {
    color: black;
}

Вся часть упоминается как правило CSS, и в этом примере «h1» является селектором.

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

Селектор типов

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

Мы хотим изменить цвет всех элементов h3 на нашем веб-сайте до красного:

h3 {
    color: red;
}

Мы хотим добавить некоторые дополнения для всех тегов div на нашем веб-сайте:

div {
    padding: 10px;
}

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

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

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

Пример 1. Мы хотим добавить границу к любому элементу с идентификатором выделения на нашей странице.

HTML:

<div id="highlight">
    Раздел 1.
</div>

<div id="not-highlight">
    Раздел 2.
</div>

CSS:

#highlight {
    border: 1px solid black;
}

В этом случае раздел 1 будет иметь границу, но раздел 2 не будет.

Пример 2. Мы хотим добавить границу к любому элементу, который имеет класс выделения , но красную границу для любого элемента с классом как подсветки, так и красного.

HTML:

<div class="highlight red">
    Раздел 1.
</div>

<div class="highlight">
    Раздел 2.
</div>

CSS:

.highlight {
    border: 1px solid black;
}
.highlight.red {
    border: 1px solid red;
}

В этом случае раздел 1 будет иметь красную границу, а в разделе 2 будет черная рамка.

Селекторы потомков, детей и сестер

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

Селекторы потомков нацеливают элементы, которые являются потомками другого элемента. Это делается путем добавления пробелов между именами элементов.

Пример

Мы хотим изменить цвет текста на оранжевый для всех элементов h1, которые находятся внутри div с классом заголовка.

HTML:

<div class = "title"> 
    <h1> Заголовок </ h1> 
    <div class = "section"> 
        <h1> Заголовок </ h1> 
    </ div> 
</ div>

CSS:

.title h1 {
    color: orange;
}

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

Селектора детей могут использоваться для выбора дочерних элементов. Это делается с помощью символа «>».

Пример

Мы хотим изменить цвет текста на оранжевый для всех элементов h1, которые являются прямыми дочерними элементами div с классом заголовка.

HTML:

<div class = "title"> 
    <h1> Заголовок </ h1> 
    <div class = "section"> 
        <h1> Заголовок </ h1> 
    </ div> 
</ div>

CSS:

.title > h1 {
    color: orange;
}

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

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

Пример

Мы хотим изменить фон абзацев под элементом заголовка, но только в div с классом раздела.

HTML:

<h1 class = "title"> Заголовок заголовка 1 </ h1> 
<p> Это абзац a. </ p> 
<div class = "section"> 
    <p> Это параграф 1. </ p> 
    <h1 class = "title"> Заголовок заголовка 2 </ h1> 
    <p> Это параграф 2. </ p> 
    <p> Это абзац 3. </ p> 
</ div>

CSS:

.section .title ~ p { 
    background: red; 
}

В этом случае только параграфы 2 и 3 в div с классом секции будут иметь красный фон, так как они оба являются братьями и сестрами (совместно используют один и тот же родительский элемент) заголовка заголовка 2. Хотя в параграфе 1 имеется один и тот же родитель, он появляется перед заголовком, а не после него.

Смежные селекторные элементы селектора нацеливают элементы, которые имеют один и тот же родительский элемент, но также смежны друг с другом. Это достигается путем размещения знака «плюс» между двумя именами элементов, в которых первый элемент предшествует второму элементу страницы.

Пример

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

HTML:

<p> Это абзац 0. </ p> 
<h1 class = "title"> Заголовок заголовка </ h1> 
<p> Это параграф 1. </ p> 
<p> Это параграф 2. </ p> 
<p> Это пункт 3. </ p>

CSS:

p { 
    margin: 10px 0; 
} 
.title + p { 
    margin: 0 0 10px 0; 
}

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

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

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

Пример

Мы хотим добавить значок PDF в PDF-ссылки, чтобы отличать их от обычных ссылок. Это можно сделать, используя селектор атрибутов «ends with».

CSS:

a[href$=".pdf"] {
    background: url("images/pdf.png") 100% 50% no-repeat;
    padding: 0 24px 0 0;
}

Это нацелено на любой элемент ссылки, URL-адрес которого заканчивается на «.pdf», что позволяет нам добавить значок PDF в конце имени ссылки.

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

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

Псевдоклассы действий пользователя

Мы можем настраивать элементы в разных состояниях: наведение, фокус и активный.

CSS:

element_selector: hover {...} 
element_selector: focus {...} 
element_selector: active {...}

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

Существует множество способов нацеливания элементов на основе их положения в структуре страницы. Вот несколько популярных опций:

:first-child &: last-child

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

ul li: first-child {...} 
ul li: last-child {...}

П-й ребенок

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

li: nth-child (even) {...}

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

Псевдоэлементы подобны псевдоклассам, но они отличаются тем, что они не нацелены на существующие элементы.

:first-letter & :first-line

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

CSS:

p {
    font-size: 12px;
}
p.one:first-letter, p.two:first-line {
    font-size: 18px;
}

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

Псевдоэлементы сгенерированного контента

Псевдоэлементы: before и: after могут использоваться для добавления контента к элементу.

Пример 1

Мы могли бы использовать: перед псевдоэлементом, чтобы добавить «читать больше» перед ссылками на дополнительную информацию:

CSS:

a.read-more: before { 
    content: "Подробнее:"; 
}

Пример 2

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

CSS:

a[href^="mailto:"]:after {
    content: url('images/email.png');
}

Надеюсь, теперь у вас есть лучшее понимание про селектор css и насколько они могущественны. Попробуйте их в своем проекте и посмотрите, что вы можете сделать!

Leave a Reply

Your email address will not be published. Required fields are marked *