Сколько селекторов в css
Перейти к содержимому

Сколько селекторов в css

  • автор:

Селекторы CSS для начинающих. Часть 1.

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

Сейчас я постараюсь пролить немного света на эту тему. Однако скажу, что тут всё очень просто на самом деле — главное не стоит сразу же начинать разбираться с nth-child(even) . Чтобы делать хорошую верстку, достаточно понять, как работают ID, классы и иерархия элементов.

Предлагаю вам на каждый из последующих примеров создать HTML-файл и пробовать все варианты сразу же по ходу дела. Тогда точно всё будет просто и понятно.

Пример 1. Селекторы по ID элемента

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

em style="color: #c1ef65;">"misha_em">Текст курсивом.em> strong style="color: #c1ef65;">"misha_strong">Жирный текст.strong>

HTML5-спецификация допускает использование в качестве названия атрибута ID довольно большой набор символов, но я ограничиваюсь буквами латинского алфавита + символ подчеркивания _ + цифры, мне этого хватает.

/* чтобы обратиться к элементу с конкретным ID через CSS, добавим перед ним # */ #misha_em{ color:#888; /* серый цвет для курсива */ } #misha_strong{ color:#fe0000; /* красный для жирного текста */ }

Как обратиться к нескольким элементам одновременно

Очень просто — перечислить их через запятую:

#misha_em, #misha_strong{ text-tansform: uppercase; /* конечно мы недостаточно выделили наш текст, пусть еще будет в верхнем регистре */ }

Подытожу: как видите с ID всё предельно просто — добавляем соответствующий атрибут к любому HTML-элементу, этот атрибут должен быть уникальным и не повторяться больше на странице, а затем мы просто обращаемся к нему напрямую через CSS. Всё.

Пример 2. Селекторы по классам

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

em style="color: #c1ef65;">"misha_em" style="color: #c1ef65;">"misha_text">Текст курсивом.em> strong style="color: #c1ef65;">"misha_strong" style="color: #c1ef65;">"misha_text">Жирный текст.strong>

Переделаем предыдущий пример и получим:

/* чтобы обратиться к элементам класса, добавим перед ним точку */ .misha_text{ text-tansform: uppercase; /* оба элемента и будут переведены в верхний регистр */ }

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

/* обращаемся ко всем класса misha_text */ strong.misha_text{ color:#fe0000; }

Очень кратко про приоритеты

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

Тут может показаться, что элементу должен быть присвоен цвет #fe0000 , так как это значение свойства указано в последнюю очередь, однако всё совсем не так.

.misha_text{ color:#fff !important; /* если после значения свойства указать !important - это самый высочайший приоритет */ } #misha_strong { color:#eee; /* у ID приоритет выше, чем у классов, это правило будет считаться важнее, чем .misha_text */ } .misha_text{ color:#fe0000; }

Подытожу: если абсолютно разным элементам нужно присвоить одинаковые стили, вы можете объединить их по классу.

Пример 3. Селекторы по HTML тегам. «Путешествие» по дереву DOM

Дерево — это иерархия всех HTML-тегов на странице.

    и
    — элементы списка, — жирный текст,

    — абзац.

div> ul> li>Элемент списка 1li> li>Элемент списка 2li> li>strong>Жирныйstrong> элемент списка 3li> ul> div> p>strong>Жирный текст внутри абзацаstrong>p>

К каждому из типов этих элементов можно обратиться по CSS, например:

div{ background-color:#eee; /* ко всем div (а он у нас один в примере) будет применен светло-серый фон */ } li{ color:green; /* текст элементов списка станет зелёного о_О цвета */ } strong{ background-color:#ff0000; /* фон всех элементов strong станет красного цвета */ }

Думаю тут пока понятно, пишем название любого HTML тега в CSS и прописанные вами правила применятся для каждого указанного тега на вашей HTML-странице.

А что если мы хотим изменить стиль только того жирного текста, который находится внутри абзаца? Или вдруг нам нужно, чтобы жирный текст внутри абзаца и внутри списка отличались по стилям?

Тут нам поможет наследственность. В CSS мы можем указать полный путь к нужному нам элементу от самого начала документа, да хоть от самого ! Чтобы понять, о чем я говорю, смотрите пример:

    , который в свою очередь находится внутри элемента
    , который в свою очередь находится внутри элемента , и необязательно, чтобы эти элементы шли друг за другом последовательно. то есть может быть и так: div p ol li ul li p strong */ div ul li strong{background-color:#ff0000;}/* ситуация точно такая же, необязательно элемент должен сразу идти после элемента

    , это может быть и: p span strong */ p strong{background-color:#aaa;}

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

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

div strong{ background-color:#ff0000; } p strong{ background-color:#aaa; }

Ну а теперь важное правило, если приоритет впереди стоящего селектора не выше, чем последующего, то к элементам применяются правила последующих селекторов.

/* сначала для всех делаем красный фон */ strong{ background-color:#ff0000; } /* а потом перезаписываем правила для тех , которые находятся внутри абзацов 

*/ p strong{ background-color:#aaa; }

Вот и всё, в принципе информации из этого поста должно быть достаточно для создания верстки практически любой сложности. Тем не менее, я также выпущу вторую часть поста «Селекторы CSS для продвинутых» на следующей неделе.

Смотрите также

  • 5 способов создания ссылок-якорей с отступом сверху. Устранение смещения из-за фиксированного блока (шапка, меню).
  • Удобный CSS оптимизатор для работы на каждый день
  • 15 красивых и эффектных CSS3 кнопок

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Понимание веса CSS-селекторов

Как и любая моя статья, эта начинается с введения. Дабы не говорить на разных языках, начнём с самых основ в мире CSS, то есть с терминологии. Чувствую себя преподавателем в университете — как же это круто.

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

Простейшая структура CSS-правила

Селектор — это строка, представляющая собой формальное описание структуры, на основе которого выбирается элемент или группа элементов в дереве документа и применяется объявленный блок свойств.

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

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

Вес селекторов

Нет, здесь не идёт речь об их реальном весе (его нет), а также о количестве символов. Такой вес нельзя измерить весами, так как он не вещественен в обычном понимании и вообще не существует в нашем с вами мире людей. Зато он есть в виде нулей и единиц. Получается, что селектор можно взвесить, используя некую систему, о которой мы и будем говорить дальше.

Что такое вес селектора?

Вес селектора — это условные четыре позиции x, x, x, x , которые заполняются нулями и единицами в соответствии с содержимым селектора. Каждая из позиций имеет своё содержимое:

  • Инлайн стили
  • Идентификаторы
  • Классы, атрибуты и псевдоклассы
  • Теги и псевдоэлементы

Как это читать?

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

Как заполнять?

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

В этом примере селектором выступает заголовок h1 , который состоит из одного тега. Получается, что напротив столбца «тег» мы ставим единичку. Получается следующая картина: 0, 0, 0, 1 .

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

#main .container article.post > header h1.giga

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

Давайте начнём слева, так как в начале стоит единственный идентификатор #main . Далее мы видим три класса .container , .post и .giga , а также три тега article , header и h1 . Для ещё большей наглядности я распишу это в виде этапов:

// Селектор #main .container article.post > header h1.giga // Начальный вес 0, 0, 0, 0 // Идентификаторы #main 0, 1, 0, 0 // Классы, атрибуты и псевдоклассы .container 0, 1, 1, 0 .post 0, 1, 2, 0 .giga 0, 1, 3, 0 // Теги и псевдоэлементы article 0, 1, 3, 1 header 0, 1, 3, 2 h1 0, 1, 3, 3 // Итог #main .container article.post > header h1.giga => 0, 1, 3, 3 

Давайте напишем какой-нибудь безбашенный селектор, который я, надеюсь, никогда не увижу ни у кого в коде:

// Селектор body.page-posts #main .container article.post ul.list-unstyled > li:first-child h2.article-title:hover < color: #333; >// Начальный вес 0, 0, 0, 0 // Идентификаторы #main 0, 1, 0, 0 // Классы, атрибуты и псевдоклассы .page-posts 0, 1, 1, 0 .container 0, 1, 2, 0 .post 0, 1, 3, 0 .list-unstyled 0, 1, 4, 0 :first-child 0, 1, 5, 0 .article-title 0, 1, 6, 0 :hover 0, 1, 7, 0 // Теги и псевдоэлементы body 0, 1, 7, 1 article 0, 1, 7, 2 ul 0, 1, 7, 3 li 0, 1, 7, 4 h2 0, 1, 7, 5 // Итог body.page-posts #main .container article.post ul.list-unstyled > li:first-child h2.article-title:hover => 0, 1, 7, 5 

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

// Селектор .main[data-columns]:before < content: "3 .column.size-1of3"; >// Начальный вес 0, 0, 0, 0 // Идентификаторы 0, 0, 0, 0 // Классы, атрибуты и псевдоклассы .main 0, 0, 1, 0 [data-columns] 0, 0, 2, 0 // Теги и псевдоэлементы :before 0, 0, 2, 1 // Итог .main[data-columns]:before => 0, 0, 2, 1 

Вот такие вот дела.

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

А что, если вес селекторов одинаковый?

Допустим, что у вас есть два или несколько селекторов так или иначе указывающих на один и тот же элемент. И вот так сложилось, что вы посчитали или просто взглянули на них, и вес оказался одинаковым. Не стоит отчаиваться, просто блок объявлений последнего селектора в вашем CSS-коде из этой группы и будет применяться к элементу. Как-то так. Мне кажется это логичным. Прямо как в поговорке «кто не успел, тот опоздал», но наоборот: «кто опоздал, тот и успел».

Зачем это нужно?

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

Ещё одним применением такого вот расчёта являются сервисы или скрипты, которые строят диаграммы специфичности CSS. Это может быть очень удобно для анализа и оценки избыточности вашего кода.

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

Я ленивый и не хочу понимать, как считать вес селекторов, что тогда?

Ох, специально для вас у меня есть сервис, на который я наткнулся при подготовке к изложению этого материала: Specificity Calculator — это простой и эффективный калькулятор веса селекторов.

Специфичность селекторов

Раз уж зашла речь про вес CSS-селекторов, то неизбежно задумываешься о том, как бы его оценить: когда нужно ему худеть, а когда наоборот — поправляться. Как и у человека, у селекторов всё таки есть оптимальный вес.

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

Хорошо, всё это замечательно, но причём тут вес? — да очень просто, он напрямую от этого зависит. Чем больше вложений, тем больше вес. Логично, однако.

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

Выводы

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

Делимся на оплату хостинга или кофе.
Чем чаще пью кофе, тем чаще пишу статьи.

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

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

Что же это такое? И так начнем. Для начала, конечно, можно посмотреть спецификацию CSS 2.0.

Вдоволь насмотревшись на спецификацию, можно прийти к выводу, что в данном случае селектор работает так. Для примера измение бордер для кнопки через CSS:

input[type="button"]

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

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

/* Оформить все элементы с атрибутом type */ [type] < свойство : значение >/* Оформить все элементы с атрибутом type="button" */ [type="button"] < свойство : значение >/* оформить все элементы с атрибутом type, который приблизительно равен button */ [type~="button"] < свойство : значение >/* Оформить все элементы с атрибутом type, у которых первое слово в значении атрибутов — одинаковое */ [type|="button"] < свойство : значение >/* Оформить все элементы с атрибутом type, который начинается с button */ [type^="button"] < свойство : значение >/* Оформить все элементы с атрибутом type, который заканчивается с button */ [type$="button"] < свойство : значение >/* Оформить все элементы с атрибутом type, который содержит button */ [type*="button"]

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

a[rel*=external] < /* оформляем внешние ссылки */ >[data-href*="https"][data-title="Petya"] < /* можно использовать множественные селекторы атрибутов */ >

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

div[data-cat="main"]

Или еще более компактное использование селектора атрибутов:

[data-cat="main"]

Эти же правила можно использовать и для Jquery селекторов по артибуту:

/* Выбрать все элементы с атрибутом type */ $('[type]') /* Выбрать все элементы с атрибутом type="button" */ $('[type="button"]') /* Выбрать все элементы с атрибутом type, который приблизительно равен button */ $('[type~="button"]') /* Выбрать все элементы с атрибутом type, у которых первое слово в значении атрибутов — одинаковое */ $('[type|="button"]') /* Выбрать все элементы с атрибутом type, который начинается с button */ $('[type^="button"]') /* Выбрать все элементы с атрибутом type, который заканчивается с button */ $('[type$="button"]') /* Выбрать все элементы с атрибутом type, который содержит button */ $('[type*="button"]')

Jquery селектор по атрибуту data все также прост:

$('[data-href]')

А что бы получить значение атрибута data надо использовать функцию data:

$('.clock').data('hour');

Вот такая забавная штука селектор атрибутов. ?

Сколько селекторов в css

Ответ. Селектор служит для связи определения с элементами HTML-кода.

Ответ. В качестве селектора элемента записывается имя элемента. Например, P .

Ответ. Селектор элемента связывает определение со всеми элементами с заданным названием. Например, селектор P свяжет определение со всеми абзацами (c элементами P ).

Ответ. Селектор класса имеет вид: .имя класса . Например, .mark .

Ответ. Селектор класса связывает определение со всеми элементами, в открывающем теге которых записан атрибут class со значением, совпадающим с именем класса (не считая начальной точки). Например, селектор .mark связывает определение со всеми элементами с атрибутом class=»mark» .

Ответ. Селектор класса с привязкой к элементу имеет вид: ИМЯ ЭЛЕМЕНТА.имя класса . Например, P.mark .

Ответ. Селектор класса с привязкой к элементу связывает определение со всеми элементами с указанным названием, в открывающем теге которых записан атрибут class со значением, совпадающим с именем класса (не считая разделяющей точки). Например, селектор P.mark связывает определение со всеми элементами P с атрибутом class=»mark» . Такое определение не будет работать для элементов с классом mark , если они не являются элементами P .

Ответ. Селектор идентификатора имеет вид: #имя класса . Например, #mark .

Ответ. Селектор идентификатора связывает определение со всеми элементами, в открывающем теге которых записан атрибут id со значением, совпадающим с именем идентификатора (не считая начальной решётки). Например, селектор #mark связывает определение со всеми элементами с атрибутом id=»mark» .

Ответ. В одном HTML-файле не может быть двух элементов с одними идентификатором. Внутри файла идентификатор уникален. Элементов с одним и тем же классом в одном файле может быть сколько угодно.

Ответ. Универсальный селектор представляется символом звёздочка (*).

Ответ. Универсальный селектор соответствует любому элементу.

Ответ. Для связи одного определения с несколькими селекторами последние перечисляются в заголовке определения через запятые, образуя, тем самым, составной селектор. Например, EM,STRONG,.mark . Такая операция называется .

Ответ. Связь такого определение с элементами определяется как совокупность связей всех селекторов, входящих в состав составного селектора. Например, селектор EM,STRONG,.mark связывает определение со всеми элементами EM , STRONG , а также с элементами, в открывающем теге которых записан атрибут class=»mark» .

Ответ. Контекстными называются определения, работающие только при определенной комбинации вложенности элементов.

Ответ. Для задания контекстного определения селекторы в его заголовке перечисляются через пробелы (пробел — ) в порядке предполагаемой вложенности. Например, P EM .

Ответ. Контекстное определение связано с элементами, которые удовлетворяют указанному в заголовке определения порядку вложенности. Например, селектор P EM связывает определение с теми элементами EM , которые вложены в элемент P (являются его потомками, не обязательно прямыми).

Ответ. Элемент сохраняет стили своего родителя, и сам передаёт приобретённый стиль по наследству своим потомкам.

Ответ. Не все свойства наследуются, например, не наследуется свойство border (описывает рамку элемента). В справочниках по свойствам CSS факт наследования всегда отмечается.

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

Ответ. Частное определение главнее общего.

Ответ. Стилевое определение потомка отменяет аналогичное определение родителя и передаётся по наследству.

  1. Если для родительского элемента (например, BODY ) задано стилевое определение, и оно не конфликтует со стилевыми определениями, заданными для потомка (например, для P ), то стилевое определение родителя наследуется потомком.
  2. Стилевое определение потомка (например, P ) главнее аналогичных определений родителя (например, BODY ).
  3. Стилевое определение в теге главнее стилевого определения в головной части HTML-кода, а последнее главнее определений, заданных в отдельном стилевом файле.
  4. Если задано несколько конфликтующих стилевых определений равного каскадного веса, то действует последнее из них. Например, текст в абзаце < P style="color:red;color:blue">будет синего цвета.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *