Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Фишки css

Селекторы в css: что такое и для чего нужны. Стань продвинутым верстальщиком после прочтения статьи

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

В данной статье я объясню, что такое селекторы в css и каких видов они бывают, также подробно расскажу, что такое классы, псевдоклассы и псевдоэлементы, кого называют родителем или предком, а кого потомком или дочерним элементом. Безусловно, на ключевые моменты теоретического материала я подготовил практические задания и привел готовые программные решения. Приступим же!

Что такое селекторы и какую роль они играют?

Если вы хоть раз работали с файлом расширения .css или управляли стилями, то могу вас порадовать и сказать, что вы уже познакомились с селекторами.

Итак, что же это за приспособление такое?

Селекторы – это наименования элементов, к которым вы применяете определенный список стилевых правил.

Весь css-код состоит из селекторов, свойств и их значений. Для 100% понимания я приведу пример:

Body (селектор) { font-size (свойство): 25px; (значение)}

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

Также существует универсальный селектор (*), в котором прописывается набор стилей сразу для всех параметров веб-страницы. Выглядит он следующим образом:

*{ набор стилевых правил;}

Понятие селекторов

Думаю, вы уже и сами догадались о главной функции, которую выполняет данный механизм и соответственно css. Конечно стили можно прописывать и в разметке, написанной на html и html5,  однако в таком случае код становится хаотичным, а отслеживание багов превращается в пытку. Поэтому разделение структуры сайта и его оформления обладает рядом преимуществ:

  • Код становится более «прозрачным» и пугающий хаос превращается в порядок;
  • Легче отслеживать ошибки;
  • Благодаря возможностям css работа с селекторами становится гибкой и дизайн сайта выглядит намного лучше.

Типы селекторов

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы тегов</title>
  <style>
   h3 { 
    text-decoration: line-through;
   }
  </style>
 </head> 
 <body>
   <h3>Здесь написан какой-то текст.</h3>
 </body>
</html>

Классы

Теперь переходим к классам. Если вы видите в css-коде что-то такое: “.gradient”, то это значит, что где-то в разметке для определенного элемента или группы элементов разработчиком был задан атрибут class с именем gradient.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>классы</title>
  <style>
   h3 { 
    text-decoration: underline;
   }
   .dif {
    color: red;
    text-decoration: overline;
}
  </style>
 </head> 
 <body>
   <h3>Здесь написан какой-то текст.</h3>
  <h3 class="dif">Здесь написан какой-то текст.</h3>    
 </body>
</html>


Идентификаторы

Теперь перескакиваем на идентификаторы (id). По назначению они очень похожи на классы, однако с ними удобно работать в скриптах, например, в JavaScript-коде.

Также селекторы типа id должны быть уникальными. Для того чтобы объявить такой элемент как селектор, нужно перед названием дописать символ «#». Чтобы посмотреть пример кода вот вам задание:

  • в прошлом примере замените слово class на id;
  • замените «.» на «#»;
  • посмотрите результат (он не должен отличаться от результата прошлого примера).

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

И наконец мы подошли к селекторам атрибутов. Точно так же, как и в предыдущих типах, в css существует возможность управлять стилями отдельных атрибутов.

Для этого наименование последнего стоит обрамить квадратными скобками: [атрибут]. Можно использовать и вместе с селектором, но в таком случае пробела между ними быть не должно!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   h2 { 
    text-decoration: underline;
    color: red;
   }
[title] {
    color: brown; 
   }
  strong[title] {
    color: green; 
   }
  </style>
 </head> 
 <body>
   <h2>Заголовок новостной статьи</h2>
  <p title="основной текст">Тут написан текст публикации. А теперь вставлена: "<strong title ="Слова древнегреческого мыслителя.">важная цитата знаменитости</strong>".</p>    
 </body>
</html>

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

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

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

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

Понятие псевдоклассы

Отличным примером могут стать кнопки или ссылки. Псевдоклассы описываются обязательно с селектором, после которого без пробела ставится «:» и далее название псевдокласса.

Все они делятся на 3 вида:

  1. отвечают за текущее состояние объектов;
  2. определяют иностранный язык и его особенности синтаксиса;
  3. относятся к дереву эелементов.
Группа Наименование Предназначение
1 :link Описывает внешний вид ссылок, на которые еще не переходил пользователь.
:active Задает оформление активному объекту. К примеру, при наведении на объект веб-страницы он увеличивается или начинает мигать.
:focus Отвечает за стиль элемента, на который наведен фокус. Такое можно наблюдать на формах в текстовых полях.
:visited Определяет внешний вид ссылок, по которым уже был совершен переход. Например, в поисковиках такие ссылки выделяются другим цветом.
:hover Стиль объекта меняется при наведении на него курсора.
2 :lang Взаимодействует вместе с html-кодом. В нем через одноименный атрибут задается язык контента, а в css при помощи :lang указываются стилевые особенности.
3 :first-child Задает стилевые правила первому элементу во всем дереве.

Теперь рассмотрим пример.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style>
a{font-size: 35px; background:#EEEED1;}
   A:link { 
    color: color: #00008B; 
   }
   A:visited { 
    color: #838B8B; 
   }
   A:hover { 
    color: #FF34B3; 
    background:#FFFeE0;
   }
  a:first-child { margin-left:75px;}
  </style>
 </head>
 <body>
  <p><a href="#">First link</a> Second link </p>
  <p>Third link </p>
 </body>
</html>

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

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

В плане синтаксиса все остается таким же, как и у псевдоклассов. Однако если вы встретите что-то такое: «::after», то не хватайтесь за голову. Это тоже псевдоэлемент. Его синтаксис выглядит по-другому, потому что с появлением css3 было решено описываемый инструмент отличать от предыдущего при помощи двойного двоеточия. Но валидатор пропустит оба варианта написания.

Существует всего 4 псевдоэлемента.

Псевдоэлемент Назначение
::before С его помощью можно вставить некий текст перед содержимым указанного объекта.
::after С его помощью можно вставить некий текст после содержимого указанного объекта.
::first-line Форматирует первую строчку текстового контента.
::first-letter Задает стиль первого символа в указанном блоке.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>псевдоэлемент</title>
  <style>
    .new::after {
      content: "Свежие новости!"; 
     padding: 12px;
     border-radius: 10px;
      color: red;
      background-color: #FFD700;      
    }
  </style>
 </head> 
 <body>
  <article class="new">
   <header><h1>Название 1</h1></header>
   Текстовый контент первой публикации. 
  </article>
  <article>
   <header><h1>Название 2</h1></header>
    Текстовый контент первой публикации. 
  </article>
 </body> 
</html>

На этом и закончу. Я постарался уместить в одну статью главную информацию, которая даст вам четкое понимание селекторов и их типов. Если вам понравилась публикация, то подписывайтесь на обновления и делитесь впечатлениями с друзьями. Желаю удачи! Пока-пока!

С уважением, Роман Чуешов


Прочитано: 16 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: