Как обратиться к элементу 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. Преподаватель в школе Нетология.

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

10.1. Структура документа: родитель-потомок в CSS

HTML документы строятся на иерархии элементов. Каждый элемент является родителем или потомком, или и тем, и другим. Например, элемент body является родителем для элемента ol . А элемент ol является родителем для элементов li . body является дочерним элементу html и так далее.

Родителем и потомком называют те элементы, разница между которыми один уровень. Если разница между элементами несколько уровней, например, body и li , то такие элементы называют предок ( body ) и потомок ( li ).

И теперь давайте посмотрим реальный пример.

Теперь первый span (родитель p ) сделаем красного цвета. Второй span (родитель h1 ) сделаем зеленого цвета. Это реализовано в третьем примере.

Родительский класс в CSS

Почти никак. CSS — это каскад: обратиться можно либо к дочернему элементу, либо к идущему в потоке после элемента на одном уровне вложенности.

Исключение составляет :focus-within :

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css вёрстка наследование или задайте свой вопрос.

дизайн сайта / логотип © 2022 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2022.1.7.41110

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

CSS как обращаться к вложенному классу

В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:

На что стоит обратить внимание:

• Классы и идентификаторы можно присваивать любым (всем) тегам.
• Каждый id уникален и не может повторяться в пределах одной страницы, в отличие от классов!
• Один и тот же класс может быть присвоен любым тегам и может повторяться любое количество раз на странице.
• Если мы хотим задать конкретному тегу несколько классов, мы просто задаём их через пробел.
• Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.

Как обратиться к классу или id в файле стилей (CSS)?

В нашем случае последние две инструкции не сработают, так как у нас нет классов, вложенных внутрь тегов с заданными атрибутами. Как вы могли заметить, чтобы обозначить, что мы обращаемся именно к id, нужно перед его именем без пробелов поставить знак решётки (#), если мы обращаемся к классу, то перед именем класса должны поставить точку (.).

2.1. Основы CSS

CSS (Cascading Style Sheets) — язык таблиц стилей, который позволяет прикреплять стиль (например, шрифты и цвет) к структурированным документам (например, документам HTML и приложениям XML).

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

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

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

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

Объявление стиля состоит из двух частей: селектора и объявления. В HTML имена элементов нечувствительны к регистру, поэтому «h1» работает так же, как и «H1». Объявление состоит из двух частей: имя свойства (например, color ) и значение свойства ( grey ). Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.

Рис. 1. Структура объявления

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

Виды каскадных таблиц стилей и их специфика

• Содержание:

1. Виды таблиц стилей

1.1. Внешняя таблица стилей

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

К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов , указав в атрибуте тега media назначение данной таблицы стилей. rel=»stylesheet» указывает тип ссылки (ссылка на таблицу стилей).

Атрибут type=»text/css» не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type=»text/css» .

1.2. Внутренние стили

Внутренние стили встраиваются в раздел HTML-документа и определяются внутри тега . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style ).

1.3. Встроенные стили

Когда мы пишем встроенные стили, мы пишем CSS-код в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style :

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

1.4. Правило @import

Правило @import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:

Правило @import также используется для подключения веб-шрифтов:

2. Виды селекторов

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

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

Соответствует любому HTML-элементу. Например, * обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after , *:checked .

2.2. Селектор элемента

Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 задаст общий стиль форматирования всех заголовков h1 .

2.3. Селектор класса

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

Если элемент имеет несколько атрибутов класса, их значения объединяются с пробелами.

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

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

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

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

2.5. Селектор потомка

Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li

— выберет все элементы li , являющиеся потомками всех элементов ul .

Если нужно отформатировать потомки определенного элемента, этому элементу нужно задать стилевой класс:

• p.first a — данный стиль применится ко всем ссылкам, потомкам абзаца с классом first ;
• p .first a — если добавить пробел, то будут стилизованы ссылки, расположенные внутри любого тега класса .first , который является потомком элемента

  ;

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

2.6. Дочерний селектор

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

Например, p > strong — выберет все элементы strong , являющиеся дочерними по отношению к элементу p .

2.7. Сестринский селектор

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

• h1 + p — выберет все первые абзацы, идущие непосредственно за любым тегом , не затрагивая остальные абзацы;
• h1

2.8. Селектор атрибута

• [атрибут] — все элементы, содержащие указанный атрибут, [alt] — все элементы, для которых задан атрибут alt ;
• селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img[alt] — только картинки, для которых задан атрибут alt ;
• селектор[атрибут=»значение»] — элементы данного типа, содержащие указанный атрибут с конкретным значением, img[title=»flower»] — все картинки, название которых содержит слово flower ;
• селектор[атрибут

2.9. Селектор псевдокласса

• :link — не посещенная ссылка;
• :visited — посещенная ссылка;
• :hover — любой элемент, по которому проводят курсором мыши;
• :focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;
• :active — элемент, который был активизирован пользователем;
• :valid — поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу данных;
• :invalid — поля формы, содержимое которых не соответствует указанному типу данных;
• :enabled — все активные поля форм;
• :disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;
• :in-range — поля формы, значения которых находятся в заданном диапазоне;
• :out-of-range — поля формы, значения которых не входят в установленный диапазон;
• :lang() — элементы с текстом на указанном языке;
• :not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not([type=»submit»]) ;
• :target — элемент с символом # , на который ссылаются в документе;
• :checked — выделенные (выбранные пользователем) элементы формы.

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

Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром, указанным в круглых скобках:

• :nth-child(odd) — нечётные дочерние элементы;
• :nth-child(even) — чётные дочерние элементы;
• :nth-child(3n) — каждый третий элемент среди дочерних;
• :nth-child(3n+2) — выбирает каждый третий элемент, начиная со второго дочернего элемента (+2) ;
• :nth-child(n+2) — выбирает все элементы, начиная со второго;
• :nth-child(3) — выбирает третий дочерний элемент;
• :nth-last-child() — в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с :nth-child() , но начиная с последнего, в обратную сторону;
• :first-child — позволяет оформить только самый первый дочерний элемент тега;
• :last-child — позволяет форматировать последний дочерний элемент тега;
• :only-child — выбирает элемент, являющийся единственным дочерним элементом;
• :empty — выбирает элементы, у которых нет дочерних элементов;
• :root — выбирает элемент, являющийся корневым в документе — элемент html .

2.11. Селектор структурных псевдоклассов типа

Указывают на конкретный тип дочернего тега:

• :nth-of-type() — выбирает элементы по аналогии с :nth-child() , при этом берёт во внимание только тип элемента;
• :first-of-type — выбирает первый дочерний элемент данного типа;
• :last-of-type — выбирает последний элемент данного типа;
• :nth-last-of-type() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца;
• :only-of-type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.

2.12. Селектор псевдоэлемента

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

• :first-letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам;
• :first-line — выбирает первую строку текста элемента, применяется только к блочным элементам;
• :before — вставляет генерируемое содержимое перед элементом;
• :after — добавляет генерируемое содержимое после элемента.

3. Комбинация селекторов

Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:

• a[href][title] — выберет все ссылки, для которых заданы атрибуты href и title ;
• img[alt*=»css»]:nth-of-type(even) — выберет все четные картинки, альтернативный текст которых содержит слово css .

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

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

5. Наследование и каскад

Наследование и каскад — два фундаментальных понятия в CSS, которые тесно связаны между собой.

Наследование заключается в том, что элементы наследуют свойства от своего родителя (элемента, их содержащего).

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

5.1. Наследование

Наследование является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы, таких как color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibility , white-space и word-spacing . Во многих случаях это удобно, так как не нужно задавать размер шрифта и семейство шрифтов для каждого элемента веб-страницы.

Свойства, относящиеся к форматированию блоков, не наследуются. Это background , border , display , float и clear , height и width , margin , min-max-height и -width , outline , overflow , padding , position , text-decoration , vertical-align и z-index .

Принудительное наследование

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

Как задаются и работают CSS-стили

Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit ).

Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше.

К одному элементу могут применяться стили из разных источников. Проверить, какие стили применяются, можно в режиме разработчика браузера. Для этого над элементом нужно щёлкнуть правой кнопкой мыши и выбрать пункт «Посмотреть код» (или что-то аналогичное). В правом столбце будут перечислены все свойства, которые заданы для этого элемента или наследуются от родительского элемента, а также файлы стилей, в которых они указаны, и порядковый номер строки кода.

Рис. 2. Режим разработчика в браузере Google Chrome

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

5.2. Каскад

Каскадирование — это механизм, который управляет конечным результатом в ситуации, когда к одному элементу применяются разные CSS-правила. Существует три критерия, которые определяют порядок применения свойств — правило !important , специфичность и порядок, в котором подключены таблицы стилей.

Правило !important

Вес правила можно задать с помощью ключевого слова !important , которое добавляется сразу после значения свойства, например, span . Правило необходимо размещать в конец объявления перед закрывающей скобкой, без пробела. Такое объявление будет иметь приоритет над всеми остальными правилами. Это правило позволяет отменить значение свойства и установить новое для элемента из группы элементов в случае, когда нет прямого доступа к файлу со стилями.

Специфичность

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

• для id добавляется 0, 1, 0, 0 ;
• для class добавляется 0, 0, 1, 0 ;
• для каждого элемента и псевдоэлемента добавляется 0, 0, 0, 1 ;
• для встроенного стиля, добавленного непосредственно к элементу — 1, 0, 0, 0 ;
• универсальный селектор не имеет специфичности.

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

Порядок подключённых таблиц

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

Похожие публикации:

1. Как сделать красный шрифт в html
2. Как сделать пагинацию на сайте html
3. Как сделать рамку в css
4. Как сделать слайдер в html

Обработка наведения, фокусировки и других состояний

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

Каждый служебный класс в Tailwind можно применять условно, добавляя в начало имени класса модификатор, описывающий условие, на которое вы хотите ориентироваться.

Например, чтобы применить класс bg-sky-700 при наведении курсора, используйте класс hover:bg-sky-700 :

Наведите указатель мыши на эту кнопку, чтобы увидеть изменение цвета фона

Сохранить изменения

button class="bg-sky-500 hover:bg-sky-700 . "> Сохранить изменения button>

Как это соотносится с традиционным CSS?

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

Традиционно одно и то же имя класса применяет разные стили при наведении курсора

.btn-primary  background-color: #0ea5e9; > .btn-primary:hover  background-color: #0369a1; >

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

В Tailwind отдельные классы используются для состояния по умолчанию и состояния наведения

.bg-sky-500  background-color: #0ea5e9; > .hover\:bg-sky-700:hover  background-color: #0369a1; >

Обратите внимание, как hover:bg-sky-700 только определяет стили для состояния :hover ? По умолчанию он ничего не делает, но как только вы наводите курсор на элемент с этим классом, цвет фона изменится на sky-700 .

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

Tailwind включает в себя модификаторы практически для всего, что вам когда-либо понадобится, в том числе:

• Псевдоклассы, такие как :hover , :focus , :first-child , и :required
• Псевдоэлементы, такие как ::before , ::after , ::placeholder , и ::selection
• Медиа и функциональные запросы, такие как отзывчивые контрольные точки, темный режим и prefers-reduced-motion
• Селекторы атрибутов, такие как [dir=»rtl»] и [open]

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

button class="dark:md:hover:bg-fuchsia-600 . "> Сохранить изменения button>

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

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

Наведение, фокус и активность

Стилизуйте элементы при наведении, фокусе и активном с помощью модификаторов hover , focus и active :

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

Сохранить изменения

button class="bg-violet-500 hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 . "> Сохранить изменения button>

Tailwind также включает модификаторы для других интерактивных состояний, таких как :visited , :focus-within , :focus-visible и другие.

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

Первый, последний, нечетный и четный

Стилизуйте элемент, когда он является первым или последним дочерним элементом, используя модификаторы first и last :

Kristen Ramos kristen.ramos@example.com
Floyd Miles floyd.miles@example.com
Courtney Henry courtney.henry@example.com
Ted Fox ted.fox@example.com

ul role="list" class="p-6 divide-y divide-slate-200">  li class="flex py-4 first:pt-0 last:pb-0"> img class="h-10 w-10 rounded-full" src="" alt="" /> div class="ml-3 overflow-hidden"> p class="text-sm font-medium text-slate-900">p> p class="text-sm text-slate-500 truncate">p> div> li>  ul>

Вы также можете стилизовать элемент, если он является четным или нечетным, используя модификаторы odd и even :

Имя	Заголовок	Эл. почта
Jane Cooper	Regional Paradigm Technician	jane.cooper@example.com
Cody Fisher	Product Directives Officer	cody.fisher@example.com
Leonard Krasner	Senior Designer	leonard.krasner@example.com
Emily Selman	VP, Hardware Engineering	emily.selman@example.com
Anna Roberts	Chief Strategy Officer	anna.roberts@example.com

table> tbody>  tr class="odd:bg-white even:bg-slate-50"> td>td> td>td> td>td> tr>  tbody> table>

Tailwind также включает модификаторы для других структурных псевдоклассов, таких как :only-child , :first-of-type , :empty , и другие.

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

Состояния формы

Стилизуйте элементы формы в разных состояниях с помощью таких модификаторов, как required , invalid и disabled :

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

form> label class="block"> span class="block text-sm font-medium text-slate-700">Имя пользователяspan> input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500 disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none invalid:border-pink-500 invalid:text-pink-600 focus:invalid:border-pink-500 focus:invalid:ring-pink-500 "/> label> form>

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

Tailwind также включает модификаторы для других состояний формы, таких как :read-only , :indeterminate , :checked и другие.

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

Стиль на основе родительского состояния (group- )

Когда вам нужно стилизовать элемент на основе состояния некоторого родительского элемента, пометьте родителя классом group и используйте модификаторы group-* , такие как group-hover , для стилизации целевого элемента:

Наведите указатель мыши на карточку, чтобы увидеть, как оба текстовых элемента меняют цвет

Новый проект

Создайте новый проект из множества начальных шаблонов.

a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500"> div class="flex items-center space-x-3"> svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"> svg> h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">Новый проектh3> div> p class="text-slate-500 group-hover:text-white text-sm">Создайте новый проект из множества начальных шаблонов.p> a>

Этот шаблон работает со всеми модификаторами псевдокласса, например, group-focus , group-active или даже group-odd .

Отличие вложенных групп

При вложенных группах вы можете стилизовать что-то на основе состояния специфической родительской группы, дав этому родителю уникальное имя группы, используя класс group/ , и включив это имя в модификаторы, используя такие классы, как group-hover/ :

Co-Founder / CEO
VP, Marketing
Account Coordinator

ul role="list"> li class="group/item hover:bg-slate-100 . "> img src="" alt="" /> div> a href="">a> p>p> div> a class="group/edit invisible hover:bg-slate-200 group-hover/item:visible . " href="tel:"> span class="group-hover/edit:text-gray-700 . ">Callspan> svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-slate-500 . "> svg> a> li>  ul>

Группы можно называть как угодно, и их не нужно никак настраивать — просто назовите свои группы прямо в разметке, и Tailwind автоматически сгенерирует необходимый CSS.

Произвольные группы

Вы можете создать одноразовые модификаторы group-* на лету, указав свой собственный селектор в виде произвольного значения между квадратными скобками:

Generated CSS

div class="group is-published"> div class="hidden group-[.is-published]:block"> Published div> div>

.group.is-published .group-\[\.is-published\]\:block  display: block; >

Для большего контроля вы можете использовать символ & , чтобы отметить, где .group должен оказаться в конечном селекторе относительно селектора, который вы передаете:

Generated CSS

div class="group"> div class="group-[:nth-of-type(3)_&]:block"> div> div>

:nth-of-type(3) .group .group-\[\:nth-of-type\(3\)_\&\]\:block  display: block; >

Стиль на основе родственного состояния (peer- )

Когда вам нужно стилизовать элемент на основе состояния элемента sibling, пометьте его с помощью класса peer и используйте модификаторы peer-* , такие как peer-invalid , для стилизации целевого элемента:

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

form> label class="block"> span class="block text-sm font-medium text-slate-700">Эл. почтаspan> input type="email" class="peer . "/> p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm"> Пожалуйста, укажите действующий адрес электронной почты. p> label> form>

Это позволяет выполнять всевозможные изящные трюки, например плавающие метки, например, без какого-либо JS.

Этот шаблон работает со всеми модификаторами псевдокласса, например, peer-focus , peer-required и peer-disabled .

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

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

label> span class="peer-invalid:text-red-500 . ">Эл. почтаspan> input type="email" class="peer . "/> label>

Отличие сверстников

При использовании нескольких одноранговых узлов вы можете стилизовать что-либо в состоянии определенного однорангового узла, дав этому одноранговому узлу уникальное имя с помощью класса peer/ , и включив это имя в модификаторы, используя такие классы, как peer-checked/ :

Published status
Draft Published
Drafts are only visible to administrators.
Your post will be publicly visible on your site.

fieldset> legend>Published statuslegend> input id="draft" class="peer/draft" type="radio" name="status" checked /> label for="draft" class="peer-checked/draft:text-sky-500">Draftlabel> input id="published" class="peer/published" type="radio" name="status" /> label for="published" class="peer-checked/published:text-sky-500">Publishedlabel> div class="hidden peer-checked/draft:block">Drafts are only visible to administrators.div> div class="hidden peer-checked/published:block">Your post will be publicly visible on your site.div> fieldset>

Одноранговые узлы можно называть как угодно, и их не нужно никак настраивать — просто назовите своих одноранговых узлов прямо в разметке, и Tailwind автоматически сгенерирует необходимый CSS.

Произвольные одноранговые узлы

Вы можете создавать одноразовые модификаторы peer-* на лету, указав свой собственный селектор в виде произвольного значения между квадратными скобками:

Generated CSS

form> label for="email">Email:label> input id="email" name="email" type="email" class="is-dirty peer" required /> div class="peer-[.is-dirty]:peer-required:block hidden">This field is required.div> form>

.peer.is-dirty:required ~ .peer-\[\.is-dirty\]\:peer-required\:block  display: block; >

Для большего контроля вы можете использовать символ & , чтобы отметить, где .peer должен оказаться в конечном селекторе относительно селектора, который вы передаете:

Generated CSS

div> input type="text" class="peer" /> div class="hidden peer-[:nth-of-type(3)_&]:block"> div> div>

:nth-of-type(3) .peer ~ .peer-\[\:nth-of-type\(3\)_\&\]\:block  display: block; >

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

До и после

Стилизуйте псевдоэлементы ::before и ::after , используя модификаторы before и after :

label class="block"> span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700"> Эл. почта span> input type="email" name="email" class="mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="you@example.com" /> label>

При использовании этих модификаторов Tailwind по умолчанию автоматически добавит content: » , поэтому вам не нужно указывать его, если вы не хотите другое значение:

Когда вы все время выглядите раздраженным люди думают, что вы заняты.

blockquote class="text-2xl font-semibold italic text-center text-slate-900"> Когда вы все время выглядите span class="before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-pink-500 relative inline-block"> span class="relative text-white">раздраженнымspan>, span> люди думают, что вы заняты. blockquote>

Стоит отметить, что вам действительно не нужны псевдоэлементы ::before и ::after для большинства вещей в проектах Tailwind — обычно проще просто использовать настоящий HTML-элемент.

Например, вот тот же дизайн сверху, но с использованием псевдоэлемента вместо псевдоэлемента ::before , который немного легче читать и на самом деле содержит меньше кода:

blockquote class="text-2xl font-semibold italic text-center text-slate-900">  Когда вы все время выглядите span class="relative">  span class="block absolute -inset-1 -skew-y-3 bg-pink-500" aria-hidden="true">span>  span class="relative text-white">раздраженнымspan>,  span>  люди думают, что вы заняты. blockquote> 

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

Обратите внимание, что если вы отключили наши базовые стили предварительной проверки, свойство содержимого не будет установлено на пустую строку по умолчанию, и вам нужно будет включать content-[»] в любое время. вы используете модификаторы before и after .

Если вы отключили предварительную проверку, обязательно установите содержимое вручную

div class="before:content-[''] before:block . "> div>

Текст-заполнитель

Стилизуйте текст заполнителя любого ввода или текстового поля, используя модификатор placeholder :

Доступ к элементам в DOM

В предыдущем руководстве этой серии вы ознакомились с деревом и узлами DOM и узнали о типах узлов. Обычно обращение к контенту DOM выполняется через узел HTML-элемента.

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

Общие сведения о методах доступа к элементам в DOM выражены в этой таблице.

Синтаксис селектора	Метод
ID	#demo	getElementById()
Класс	.demo	getElementsByClassName()
Тег	demo	getElementsByTagName()
Селектор (один)	querySelector()
Селекторы (все)	querySelectorAll()

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

Вы можете сохранить HTML-файл access.html в свой проект, чтобы следовать примерам в этом мануале. Если вы не знаете, как работать с JavaScript и HTML локально, ознакомьтесь с руководством Добавление кода JavaScript в HTML.

Accessing Elements in the DOM

ID (#demo)

Class (.demo)

Tag (article)

Access me by tag (1)

Access me by tag (2)

Query Selector

Query Selector All

В этом HTML-файле много элементов, доступ к которым можно получить с помощью методов document. Откройте файл в браузере. Вы увидите страницу Accessing Elements in the DOM.

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

Доступ к элементам по ID

Самый простой способ получить доступ к одному элементу в DOM – это по его уникальному идентификатору. Извлечь элемент по ID можно с помощью метода getElementById() объекта document.

Читайте также: ID элемента

Чтобы к HTML-элементу можно было получить доступ по ID, у него должен быть атрибут id. У элемента div есть ID demo.

В консоли присвойте элемент переменной demoId.

const demoId = document.getElementById(‘demo’);

Введите следующее в консоль, и вы получите элемент HTML:

console.log(demoId);

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

demoId.style.border = ‘1px solid purple’;

После этого страница в браузере должна измениться.

Доступ к элементу по ID – эффективный способ быстро извлечь элемент DOM. Однако у него есть недостатки; ID должен быть уникальным, поэтому получить доступ с помощью метода getElementById() можно только к одному элементу за раз. Если вы хотите добавить функцию к нескольким элементам на странице, ваш код станет повторяться.

Доступ к элементам по классу

Атрибут class используется для доступа к одному или нескольким конкретным элементам в DOM. Получить все элементы с заданным именем класса можно с помощью метода getElementsByClassName().

Попробуйте получить доступ к нескольким элементам. В данном примере есть два элемента с классом demo.

Обратитесь к элементам в консоли и поместите их в переменную demoClass.

const demoClass = document.getElementsByClassName(‘demo’);

На данный момент может показаться, что вы можете изменять элементы так же, как и в примере с ID. Однако если вы попытаетесь запустить следующий код и изменить свойство border для элементов класса на orange, вы получите сообщение об ошибке.

demoClass.style.border = ‘1px solid orange’;
Uncaught TypeError: Cannot set property ‘border’ of undefined

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

console.log(demoClass);
(2) [div.demo, div.demo]

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

demoClass[0].style.border = ‘1px solid orange’;

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

for (i = 0; i < demoClass.length; i++) demoClass[i].style.border = '1px solid orange';
>

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

Доступ к элементам по тегу

Еще один способ доступа к нескольким элементам на странице – это HTML-тег. Получить элемент по тегу можно с помощью метода getElementsByTagName().

В этом примере используется тег article:

GetElementsByTagName(), как при доступе по классу, возвращает объект элементов, подобный массиву, где модифицировать каждый тег в документе можно с помощью цикла for.

const demoTag = document.getElementsByTagName(‘article’);
for (i = 0; i < demoTag.length; i++) demoTag[i].style.border = '1px solid blue';
>

Просмотрите страницу в браузере.

Цикл изменил свойство border всех элементов article на синий.

Селекторы запросов

Если у вас есть опыт работы с jQuery API, вы можете быть знакомы с методом доступа jQuery к DOM с помощью селекторов CSS.

$(‘#demo’); // returns the demo ID element in jQuery

В JavaScript можно сделать то же с помощью методов querySelector() и querySelectorAll().

Чтобы получить доступ к одному элементу, нужно использовать метод querySelector(). В HTML-файле у вас есть элемент demo-query.

Селектором атрибута id является символ #. Можно присвоить элемент с id demo-query переменной demoQuery.

const demoQuery = document.querySelector(‘#demo-query’);

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

В этом файле есть два элемента с классом demo-query-all:

Селектором атрибута class является точка (.). Вы можете обратиться к классу с помощью .demo-query-all.

const demoQueryAll = document.querySelectorAll(‘.demo-query-all’);

Метод forEach() позволяет присвоить цвет green свойству border всех совпадающих элементов.

demoQueryAll.forEach(query => query.style.border = ‘1px solid green’;
>);

С помощью querySelector() разделенные запятыми значения функционируют как оператор OR. Например, querySelector (‘div, article’) будет соответствовать div или article, в зависимости от того, что отображается первым в документе. С помощью querySelectorAll() значения, разделенные запятыми, функционируют как оператор AND, а querySelectorAll (‘div, article’) будет соответствовать всем значениям div и article в документе.

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

Полный код

Ниже вы найдете полный код файла, который получился в результате этого мануала. Вы можете использовать его для доступа ко всем элементам на тестовой странице. Сохраните файл как access.js и загрузите его в файл HTML прямо перед закрытием тега body.

// Assign all elements
const demoId = document.getElementById(‘demo’);
const demoClass = document.getElementsByClassName(‘demo’);
const demoTag = document.getElementsByTagName(‘article’);
const demoQuery = document.querySelector(‘#demo-query’);
const demoQueryAll = document.querySelectorAll(‘.demo-query-all’);
// Change border of ID demo to purple
demoId.style.border = ‘1px solid purple’;
// Change border of class demo to orange
for (i = 0; i < demoClass.length; i++) demoClass[i].style.border = '1px solid orange';
>
// Change border of tag demo to blue
for (i = 0; i < demoTag.length; i++) demoTag[i].style.border = '1px solid blue';
>
// Change border of ID demo-query to red
demoQuery.style.border = ‘1px solid red’;
// Change border of class query-all to green
demoQueryAll.forEach(query => query.style.border = ‘1px solid green’;
>);

Вы можете самостоятельно расширить этот файл.

Заключение

В этом мануале вы узнали 5 способов доступа к элементам HTML в DOM – по ID, по классу, по тегу HTML и по селекторам. Метод, который вы будете использовать для получения элемента или группы элементов, должен зависеть от поддержки браузера и количества элементов, которыми нужно управлять.