Как сделать селектор html
Обновлено: 07.07.2024
В предыдущих уроках мы с вами использовали только один тип селекторов - имя тега, по которому мы обращались ко всем таким тегам.
Однако, чаще всего нам нужны более точные способы обращения: к примеру, мы хотим выбрать не все абзацы, а только некоторые из них.
Способы сделать это мы и будем изучать в данном уроке.
Однако, для начала разберем два тега, которые пригодятся нам в дальнейшем.
Блок . Тег div
Тег div служит контейнером для других тегов. Сам по себе он ничего не делает, однако в него можно положить много разных тегов, например, абзацев и заголовков, а затем для всех них одновременно применить различные CSS свойства. Для примера покрасим содержимое тега div в красный цвет (используя атрибут style):
Так код будет выглядеть в браузере:
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
В настоящее время тег div является одним из основных строительных элементов на сайте. Вы еще столкнетесь с ним в дальнейшем много раз.
Блок . Тег span
Тег span является контейнером для кусочка текста. Вы уже знаете, что для того, чтобы сделать, к примеру, жирный текст - следует использовать тег b. Однако, что делать, если я хочу покрасить кусочек текста в красный цвет? Для такого случая тега, подобного тегу b, не существует.
Для этого и предназначен тег span - сам по себе он абсолютно ничего не делает, но для него можно применить CSS стили, которые позволят нам добавить нужный эффект к кусочку текста.
Давайте покрасим некоторый текст в красный цвет:
Так код будет выглядеть в браузере:
Lorem ipsum dolor sit amet.
Мы с вами изучили два необходимых нам тега и теперь приступаем к изучению более сложной работы с селекторами.
Блок . Группировка селекторов
Иногда может возникнуть следующая ситуация: вам нужно сделать одно и то же с разными тегами, например, покрасить все заголовки h2, h3 и абзацы в красный цвет. В этом случае вам придется написать что-то вроде такого:
Однако, существует способ сделать это немного короче: селекторы тегов можно объединять через запятую и CSS код применится к ним всем одновременно. Приведенный выше код можно переписать покороче таким образом:
Так код будет выглядеть в браузере:
Заголовок h2
Заголовок h3
Абзац с текстом.
Группировать через запятую можно любое количество селекторов тегов, пробел после запятой не имеет значения, можно без него, но с ним код более красивый.
Блок . Вложенность тегов друг в друга
Представим теперь ситуацию, когда мы хотим обратиться только к тем тегам i, которые находятся внутри абзацев, и не хотим трогать те теги i, которые находятся внутри заголовков h2.
Это делается с помощью так называемого контекстного селектора, который позволяет обращаться к тегам по их вложенности в другие теги.
Чтобы показать вложенность, между селекторами следует поставить пробел (этот пробел и есть знак контекстного селектора).
Например, так - p i - мы обратимся ко всем тегам i, находящимся внутри p, p b - так ко всем тегам b внутри p, а так - div p b - ко всем тегам b, которые находятся внутри абзацев p, которые в свою очередь находятся внутри тега div.
В следующем примере мы обратимся ко всем абзацам внутри div и покрасим их в красный цвет. Абзацы вне дива и другие элементы внутри дива (в нашем случае h2) красными не станут:
Так код будет выглядеть в браузере:
Заголовок h2 внутри тега div.
Абзац внутри тега div.
Абзац внутри тега div.
Абзац внутри тега div.
Абзац вне тега div.
Блок . Выбор элемента по уникальному id
Следующий способ может вам понадобится в такой ситуации: вам необходимо для всех абзацев поставить красный цвет, а конкретно для этого абзаца - зеленый. В этом случае, как вы уже знаете, можно воспользоваться атрибутом style, однако этот способ не самый оптимальный (он захламляет HTML код CSS кодом).
Давайте сейчас для всех абзацев зададим красный цвет, а для абзаца с id="test" - зеленый:
Так код будет выглядеть в браузере:
Абзац с атрибутом id в значении "test".
Обычный абзац с текстом.
Обычный абзац с текстом.
А теперь атрибут id дадим конкретному диву и покрасим содержимое этого дива в красный цвет, обратившись к нему по его id:
Так код будет выглядеть в браузере:
Так код будет выглядеть в браузере:
Блок . Классы элементов
Обращение к элементу по его id имеет некоторый недостаток - так мы можем обратиться только к одному элементу на странице. А что делать, если нам, к примеру, нужны абзацы двух типов - красные и зеленые и они могут чередоваться в произвольном порядке? В этом случае гораздо удобнее будет воспользоваться классами.
Классы задаются с помощью атрибута class, в котором мы пишем имя класса. Их преимущество в том, что один и тот же класс может быть у многих элементов на странице. То есть, если элементы должны вести себя одинаково - мы даем им один и тот же класс.
Как обратиться к элементам с определенным классом в CSS: пусть мы задали нужным нам элементам класс с именем test, тогда в CSS ко всем элементам с этим классом мы можем обратиться следующим образом - .test - вначале символ "точка" и потом имя класса из атрибута class.
В примере ниже и абзацы, и заголовки имеют один и тот же класс test, который красит эти элементы в красный цвет:
Так код будет выглядеть в браузере:
Заголовок h2 с классом test.
Заголовок h2 с классом test.
Заголовок h2 с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац без класса.
Блок . Определенный тег с заданным классом
Бывают такие ситуации, когда разные теги имеют один и тот же класс. К примеру, у абзацев и заголовков h2 одновременно задан класс test. Вам может потребоваться выбрать только абзацы с классом test, не затрагивая заголовков h2 с этим же классом.
В этом случае вместо селектора .test я должен написать следующее: p.test - таким образом я выберу все абзацы с классом test, не затронув заголовки. Если же я напишу h2.test - то выберу все заголовки h2 с классом test, не затронув абзацев.
В следующем примере только абзацы с классом test станут красного цвета, а заголовки с таким же классом - не станут:
Так код будет выглядеть в браузере:
Заголовок h2 с классом test.
Заголовок h2 с классом test.
Заголовок h2 с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац без класса.
Итак, еще раз: p.test - такой селектор выбирает абзацы с классом test. А вот если я сделаю так: p .test (поставлю пробел), то выберу все элементы с классом test, находящиеся внутри абзацев. Прочувствуйте эту разницу.
Давайте теперь выберем только h2 с классом test:
Так код будет выглядеть в браузере:
Заголовок h2 с классом test.
Заголовок h2 с классом test.
Заголовок h2 с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац без класса.
А сейчас сделаем так, чтобы класс test задавал курсив всем элементам, которым он дан, и чтобы при этом все заголовки h2 с классом test красились в красный цвет, а абзацы с этим классом - в зеленый:
Так код будет выглядеть в браузере:
Заголовок h2 с классом test.
Заголовок h2 с классом test.
Заголовок h2 с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац без класса.
Блок . Видео
Посмотрите следующее видео из заочного курса: скачайте его по данной ссылке (вам нужно именно про селекторы, пару видосов там лишние. Хотя они тоже лишними не будут) ).
Селекторы в CSS позволяют установить связь одного правила с определенным элементом HTML . А также, чтобы задавать стили для отдельных элементов, игнорируя другие:
В этой статье мы рассмотрим способы определения стилей веб-страницы с помощью селекторов классов, селекторов потомков, псевдоклассов и селекторов идентификаторов.
Настройка
Для примера нам нужен только один HTML-файл и таблица стилей CSS . Создайте папку css-selectors и веб-страницу под названием selectors.html со следующей разметкой:
Теперь создадим в той же папке файл styles.css . Это все, что понадобится для изучения CSS селекторов .
Селекторы классов
Селекторы классов позволяют применять стили CSS к определенному элементу HTML . Они дают возможность различать элементы HTML одного и того же типа. Например, когда есть два элемента
- Указанный атрибут класса в элементе HTML ;
- Соответствующий селектор классов CSS .
Можно использовать селектор классов, чтобы назначить стили для первого абзаца нашей страницы-примера. Сначала добавим к нужному абзацу атрибут класса:
Теперь стилизуем абзац
в файле CSS с помощью следующего кода:
Это правило применяется только к элементам с соответствующим атрибутом класса. Обратите внимание на точку (.) — префикс перед именем класса. Это отличает соседние селекторы CSS классов от селекторов типов:
Конвенция имен классов
Значение атрибута класса HTML может представлять собой почти все, что угодно, если оно соответствует селектору в коде CSS . Стандартная конвенция имен классов — это использование прописных букв и дефисов вместо пробелов, как в именах файлов и папок.
Добавление атрибута class не изменяет смысловое значение HTML-документа и служит для подключения CSS . Рекомендуется избегать имен классов, основанных на том, как они отображаются. Использование чего-то более семантического, например, .synopsis , дает больше свободы в действиях. Что позволяет настроить отображение этого абзаца.
Более полезные div
Атрибут class применяется не только к элементам
— он может быть использован для любого элемента HTML . Взяв на вооружение селекторы классов CSS , можно сделать блоки
и намного более полезными. Мы можем использовать их для создания, как отдельных элементов, так и произвольных разделов веб-страницы:
Начнем с отдельных элементов. На этот раз мы будем использовать класс вместо CSS селектора div . Добавьте следующий код в файл styles.css :
Конечно, для этого нам нужен соответствующий атрибут класса. Измените
Данный код позволяет использовать стили и для других элементов, а не только для кнопок.
Дивы контейнеров
не изменяет семантическую структуру страницы. Это делает его отличным инструментом для определения представляемой структуры веб-страницы. Обертывая HTML-элементы в теги
, можно создать сайт с помощью более крупных фрагментов, не влияя на то, как поисковые системы просматривают наш контент:
Попробуем создать макет фиксированной ширины с использованием метода автополей. Сначала оберните весь документ в
Независимо от того, как будет изменяться размер окна браузера, веб-страница всегда будет иметь ширину 600 пикселей и выравниваться горизонтально по центру доступного пространства. Обратите внимание, что то же самое мы раньше делали для кнопки, но теперь мы делаем это с несколькими элементами одновременно, вложив их в общий контейнер:
Именно таким образом определяются более сложные макеты веб-страниц. Например, если на нашей странице была бы боковая панель, мы бы вложили все ее элементы в другой
Без CSS селекторов атрибутов классов, которые позволяют дифференцировать элементы
Повторное использование стилей классов
Один и тот же класс может применяться к нескольким элементам в рамках одного HTML-документа . Это означает, что можно использовать произвольные объявления CSS везде. Чтобы создать еще одну кнопку, нужно добавить еще один HTML-элемент с тем же классом:
В результате этого мы получим вторую кнопку, которая выглядит так же, как и первая. Это значительно упрощает работу веб-разработчиков. Если мы когда-нибудь захотим изменить цвет кнопки, нужно будет сделать это только в одном месте, и все наши кнопки автоматически обновятся:
Изменение стилей классов
Что, если мы захотим немного изменить вторую кнопку? К счастью, можно применить несколько классов к одному и тому же HTML-элементу . Стили из каждого класса будут применены к элементу, что даст возможность повторно использовать стили .button и одновременно переопределить некоторые из них новым классом:
Мы добавляем еще один класс к нашей второй кнопке с помощью следующей разметки. Обратите внимание, что несколько классов помещаются в один атрибут класса через пробелы:
Этому элементу теперь присвоено два разных класса, и можно использовать любой из них для определения стилей. Это дает некоторые дополнительные возможности. Можно задать для второй кнопки стили класса .button и стили, относящиеся только к этой кнопке класса .call-to-action ( обязательно добавьте этот код после правила .button ):
Порядок имеет значение
Хочу обратить ваше внимание на две важные вещи, касающиеся нашей второй кнопки:
- Это добавление нового объявления по сравнению с исходным правилом .button — font-style ;
- Переопределение существующего в классе .button стиля — background-color .
Переопределение дочерних селекторов в CSS происходит из-за порядка размещения правил .call-to-action и .button в таблице стилей. Когда в файле CSS есть два противоречащих друг другу свойства, всегда применяется то, которое указано последним. Если бы вы разместили .call-to-action перед .button , применялось бы это правило, и кнопка осталась бы синей.
Другими словами, следующие элементы эквивалентны:
Селектор потомков
Возможно, вы заметили, что в нашем первом абзаце больше нельзя отличить от остального текста абзаца, так как правило .synopsis задает отображение курсивом всего текста абзаца.
Чтобы изменить этот элемент , можно было бы добавить к нему еще один класс. Но это приведет к тому, что код будет не очень удобен. Мы хотим иметь правило .synopsis в качестве отдельного независимого компонента, для которого можно полностью задать стили через CSS . То есть без необходимости внесения изменений в HTML только для того, чтобы изменить какие-то стили:
Это то, для чего предназначены CSS селекторы потомков. Они позволяют настраивать только те элементы, которые находятся внутри другого элемента. Например, можно вывести этот элемент в абзаце .synopsis со следующими стилями:
Добавление этого правила в файл styles.css задаст отображение вертикальными ( римскими ) символами, тем самым определяя разницу с курсивным шрифтом, которым отображается весь абзац
. При этом остальных элементов , размещенных на странице это изменение не коснется:
Селекторы потомков не ограничиваются селекторами классов. Таким образом, можно комбинировать любую другую группу селекторов. Например, если нужно выбрать только элементы внутри заголовков:
Не переусердствуйте
Можно вложить CSS селектор потомков настолько глубоко, насколько нужно, но не увлекайтесь. Все становится запутанно, когда вы начинаете писать правила, которые выглядят так:
Эти стили нельзя будет повторно использовать, поскольку они соответствуют только следующей структуре HTML :
Если захотите применить эти стили к заголовку
, который не был обернут в тег
Псевдоклассы для ссылок
Основные стили ссылок
В отличие от CSS селекторов псевдоклассы начинаются с двоеточия, за которым следует имя класса. Наиболее распространенными псевдоклассами ссылок являются:
- :link — ссылка, по которой пользователь еще не переходил;
- :visited — ссылка, по которой пользователь переходил раньше;
- :hover — ссылка, на которую пользователь навел курсор мыши;
- :active — ссылка, нажатая мышью (или пальцем).
Рассмотрим эти псевдоклассы, добавив следующие правила в CSS ( также обратите внимание на то, что мы используем для обозначения цветов ключевые слова , а не шестнадцатеричные коды ):
Состояние visited hover
Приведенный выше фрагмент кода отлично подходит для большинства сайтов, но давайте более внимательно рассмотрим поведение a:visited , когда мы изменим атрибут href на URL-адрес , который раньше посещали. Стиль a:hover применяется как к ранее посещенным ссылкам, так и к тем, по которым мы еще не переходили. Можно еще больше модифицировать ссылки, объединив псевдоклассы.
Добавьте это правило ниже предыдущего фрагмента кода:
Состояние visited active
Эти два последних раздела позволят задавать стили посещенных ссылок полностью отдельно от не посещенных.
Псевдоклассы для кнопок
Псевдоклассы предназначены не только для определения стилей ссылок. Вместо указания стилей для класса a:link и потомков изменим с помощью псевдоклассов класс .button . Это позволит создавать кнопки, которые ведут куда-то.
Элемент ссылки, а не элемент div
Сначала нужно изменить кнопки, чтобы они стали элементами , а не просто элементами
Если вы перезагрузите документ в браузере, то увидите, что некоторые стили больше не действуют. Хотя мы используем одни и те же классы. Это связано с тем, что является встроенным элементом, а также имеет значение цвета по умолчанию:
Нам нужно снова сделать этот элемент блочным и удалить часть стилей ссылок по умолчанию.
Стили кнопок
Начнем с :link и :visited . Мы используем аналогичный подход, что и в предыдущем разделе о CSS селекторах родителя. Но поскольку это кнопки, то мы сохраним одинаковые цвета для состояний посещенная и не посещенная. Измените существующие правила .button следующим образом:
Обратите внимание на новые псевдоклассы :link и :visited в селекторе. Без них стиль браузера по умолчанию для a:link не изменился бы. Теперь оформим состояние при наведении курсора.
Обе наши кнопки при наведении курсора будут окрашиваться в более светлый голубой цвет. Сделаем так, чтобы кнопки становились темнее, когда пользователь нажимает на них с помощью псевдокласса :active :
Стили, которые мы только что определили, готовы к повторному использованию. Назначьте класс .button любому HTML-элементу , и вы превратите его в интерактивную кнопку.
Другая кнопка
Исправим такое положение вещей, применив к нашему правилу .call-to-action несколько псевдоклассов. Замените существующее правило следующим ( убедитесь, что это определено после новых стилей .button из предыдущего раздела о дочерних селекторах в CSS ):
Мы назначили класс .call-to-action только для второй кнопки, поэтому только она станет желтой. Конечно, нам по-прежнему нужно, чтобы класс .button был назначен для обоих элементов , поскольку он определяет общие стили, такие как отступы, радиус границы и размер шрифта.
Псевдоклассы для структуры
Состояния ссылок – это лишь один аспект псевдоклассов. Существует также множество других псевдоклассов , которые предоставляют дополнительную информацию о контексте элемента. Например, псевдокласс last-of-type выбирает последний элемент определенного типа в родительском элементе. Это является альтернативой селекторам классов.
Например, мы могли бы использовать :last-of-type , чтобы добавить в наш пример определенное пространство после последнего абзаца страницы:
Это позволяет не затрагивать первые два элемента
на странице, не добавляя для последнего абзаца новый атрибут класса:
Можно даже использовать псевдокласс :first-of-type вместо класса .synopsis . Заменив существующее правило .synopsis следующим фрагментом кода, мы получим тот же результат:
Использование этого метода вместо устаревших классов имеет свои преимущества и недостатки. Например, это работает только в том случае, если наш синопсис является элементом
. Если бы мы захотели создать синтаксис с несколькими параграфами, объединив много элементов
, нам пришлось бы переписать наш CSS-код . С другой стороны, псевдоклассы позволяют задавать стили для определенных элементов, не изменяя HTML . Это дает нам четкое разделение контента от представления.
Предостережения
Но псевдоклассы немного сложнее. Контекстные селекторы CSS first-of-type и last-of-type действуют только внутри своего родительского элемента. Другими словами, p:first-of-type выбирает первый элемент
в каждом элементе контейнера.
У нас есть один общий
, который обертывает контент ( .page ), поэтому для нас это не проблема. Но что произойдет, если мы добавим следующий код в нижнюю часть элемента .page :
Это иллюстрирует сложность применения псевдоклассов для структуры. Первый элемент
здесь также будет соответствовать p:first-of-type , потому что область применения псевдокласса ограничена родительским элементом.
Если вы не хотите затрагивать абзацы в боковой панели, и выбрать только первый
Селекторы идентификаторов
CSS селекторы идентификаторов – альтернатива селекторам классов. Они работают почти так же, но на странице может размещаться только один элемент с определенным идентификатором. Это означает, что вы не сможете повторно использовать стили.
Вместо атрибута class для любого элемента HTML , используется атрибут id . Попробуйте добавить идентификатор ко второй кнопке:
По этой причине использовать CSS селекторы идентификаторов обычно не рекомендуется. Вместо этого используйте селекторы классов.
Фрагменты URL-адресов
Например, если мы хотим указать пользователю на вторую кнопку, можно использовать следующий код. Обратите внимание, что можно полностью опустить URL-адрес , если он указывает на другой раздел той же веб-страницы:
Если вы добавите первый вариант ссылки в разметку страницы selectors.html и кликните по ней, то увидите, что данный URL-адрес значится в адресной строке браузера. Чтобы увидеть, как осуществляется переход ко второй кнопке, нужно добавить на страницу немного произвольного контента или сделать высоту окна маленькой:
Этот пересекающийся функционал является веской причиной для того, чтобы избегать использования идентификаторов. Они создают зависимость между URL-адресами сайта и стилями CSS . Представьте, что вы используете в заголовках кучу атрибутов id в качестве как фрагментов URL-адресов , так и идентификаторов. Если вы забудете обновить таблицу стилей, когда отредактируете URL-адрес , то сломаете свой сайт.
Специфичность CSS
Порядок имеет значение, когда речь идет о свойствах, прописанных во внешней таблице стилей. При прочих условиях правила применяются сверху вниз. Это позволяет переопределять правила CSS селекторов атрибутов предсказуемым образом:
Если вы добавите следующий код после существующих правил .call-to-action , он переопределит заданный ранее цвет фона. Если вы разместите его в верхней части файла, он сам будет переопределен, и наша кнопка не станет красной. Это ожидаемое поведение:
Теперь посмотрите, что происходит, когда мы пытаемся сделать то же самое с помощью селектора идентификатора. Во-первых, обязательно удалите предыдущий фрагмент кода, а затем попробуйте добавить приведенный ниже код до существующих правил .call-to-action :
Специфичность селекторов, которые мы рассматривали в этой статье, показана ниже: от максимальной до минимальной:
Заключение
В этой статье вы получили практический опыт работы с CSS селекторами классов, селекторами потомков, псевдоклассами, стилями ссылок и селекторами идентификаторов. Цель всех, описанных в этой статье приемов – обеспечить возможность указать определенный HTML-элемент из CSS-кода . Селекторы классов являются самыми универсальными и имеют наименьшее количество недостатков.
Пожалуйста, оставьте свои комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, подписки, отклики, лайки, дизлайки!
Дайте знать, что вы думаете по этой теме в комментариях. За комментарии, лайки, отклики, дизлайки, подписки огромное вам спасибо!
Дайте знать, что вы думаете по этой теме статьи в комментариях. За комментарии, дизлайки, лайки, отклики, подписки огромное вам спасибо!
CSS селекторы используются для "поиска" (или выбора) элементов HTML, которые вы хотите стилизовать.
Можно разделить CSS селекторы на пять категорий:
- Простые селекторы (выбор элементов на основе имени, идентификатора, класса) (выбор элементов на основе определенных отношений между ними) (выбор элементов на основе определенного состояния) (выбор и стилизация части элемента) (выбор элементов на основе атрибута или значения атрибута)
На этой странице объясняются простые селекторы CSS.
CSS селектор элемента
Селектор элементов выбирает HTML элементы на основе имени элемента.
Пример
Здесь все элементы
на странице будут выровнены по центру с красным цветом текста:
CSS селектор id
Селектор id использует атрибут id HTML элемента для выбора определенного элемента.
Идентификатор (id) элемента является уникальным на странице, поэтому селектор id используется для выбора одного уникального элемента!
Пример
Приведенное ниже правило CSS будет применено к элементу HTML с :
Примечание: Id имя не может начинаться с цифры!
CSS селектор class
Селектор class выбирает HTML элементы с определенным атрибутом класса.
Чтобы выбрать элементы с определенным классом, введите символ точки (.), а затем имя класса.
Пример
В этом примере все HTML элементы с будут красными и выровнены по центру:
Вы также можете указать, что класс должен затрагивать только определенные HTML элементы.
Пример
В этом примере только элементы
с будут выровнены по центру:
HTML элементы также могут ссылаться на несколько классов.
Пример
В этом примере элемент
будет стилизован в соответствии с и :
This paragraph refers to two classes.
Примечание: Имя класса не может начинаться с цифры!
Универсальный CSS селектор
Универсальный селектор (*) выделяет все элементы HTML на странице.
Пример
Приведенное ниже правило CSS повлияет на каждый HTML элемент на странице:
CSS Селектор группировки
Селектор группировки выбирает все HTML элементы с одинаковыми определениями стиля.
Посмотрите на следующий код CSS (элементы h1, h2 и p имеют одинаковые определения стиля):
h2 text-align: center;
color: red;
>
p text-align: center;
color: red;
>
Будет лучше сгруппировать селекторы, чтобы минимизировать код.
Чтобы сгруппировать селекторы, разделяйте каждый селектор запятой.
Пример
В этом примере мы сгруппировали селекторы из кода выше:
Проверьте себя с помощью упражнений!
Все простые CSS селекторы
ПАЛИТРА ЦВЕТОВ
Получите ваш
Сертификат сегодня!
Связь с админом
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
CSS-селектор — это шаблон, соответствующий элементам на веб-странице. Стилизационные правила, связанные с этим селектором, будут применяться к элементам, которые соответствуют шаблону селектора.
Селекторы являются одним из наиболее важных аспектов CSS, так как они позволяют вам выбирать определенные элементы на веб-странице различными способами, чтобы их можно было стилизовать.
В CSS доступно несколько типов селекторов, давайте рассмотрим их подробнее:
Универсальный селектор
Универсальный селектор, обозначенный звездочкой ( * ), выбирает все элементы на странице.
Универсальный селектор может быть опущен, если для элемента применяется класс ( class ). Этот селектор часто используется для удаления полей ( margin ) по умолчанию или созданию отступов ( padding ) для быстрого тестирования.
Давайте рассмотрим следующий пример, чтобы понять, как это в основном работает:
Правила стиля внутри селектора * будут применяться ко всем элементам в документе.
Не рекомендуется использовать универсальный селектор ( * ) слишком часто в целях производительности. Так как этот селектор применяется ко всем элементам на веб-странице, это создает чрезмерную нагрузку на браузер. Вместо него используйте тип элемента или селектор класса.
Селекторы типов элементов
Селектор типа элемента соответствует всем выбранным элементам в документе с соответствующим именем типа элемента. Давайте рассмотрим пример, чтобы увидеть, как это работает:
Правила для селектора p будут применяться ко всем элементам
(абзацам) в документе и окрашивать их в синий цвет, независимо от их положения в дереве документа.
Id Селекторы
Селектор идентификатора ( id ) используются для определения стилей для одного уникального элемента на странице.
Это правило отображает текст элемента красным цветом, для тега, атрибут id которого имеет значение error .
Значение id атрибута должно быть уникальным в текущем документе — нельзя использовать одинаковые значения id в одном HTML-документе.
Class Селекторы
Селекторы класса могут использоваться для выбора группы HTML-элементов, которые имеют одинаковый класс. Все элементы, имеющие этот класс, будут отформатированы в соответствии с заданным правилом.
Селектор класса определяется знаком точки ( . ), за которым сразу следует значение класса.
Приведенные выше правила стиля отображают текст синим цветом для всех элементов в документе, у которых атрибут class установлен blue . Вместе с классом вы можете указывать и тип элемента, для того, чтобы сделать правило более конкретным. Например:
Правило стиля внутри селектора p.blue отображает текст синим цветом только тех элементов
, у которых атрибут class установлен blue , и не влияет на другие абзацы, не имеющие этого класса.
Селекторы с потомками
Вы можете использовать эти селекторы, когда вам нужно выбрать элемент, который является потомком другого элемента. Например, если вы хотите выбрать только те ссылки , которые содержатся в неупорядоченном списке , как показано в примере:
Аналогично, правила стиля внутри селектора h1 em будут применяться только к тем элементам , которые содержатся внутри элементов
Дочерние селекторы
Дочерние селекторы используются для выбора только тех элементов, которые являются прямыми потомками указанного элемента.
-
и не влияют на другие элементы списка.
Смежные селекторы
Смежные селекторы могут быть использованы для выбора родственных элементов (то есть элементов находящихся на одном уровне в дереве документа). Этот селектор имеет синтаксис: element-1 + element-2 , где element-2 является целью селектора.
Селектор h1 + p в следующем примере выберет элемент
имеют одного и того же родителя в дереве документа, и
. Это означает, что только для абзаца, который идет сразу после каждого заголовка
Общие смежные селекторы
Общий смежный селектор похож на предыдущий ( element-1 + element-2 ), но он менее строг. Он так же состоит из двух простых селекторов, но разделенных символом тильды ( ∼ ). Запись может иметь вид: element-1 ~ element-2 , где element-2 является целью селектора.
Селектор h1 ∼ p в приведенном ниже примере выберет все элементы
По сути, ∼ отличается от + , тем, что ~ выберет все
Есть более сложные селекторы, такие как селекторы атрибутов, псевдоклассы, псевдоэлементы. Мы подробно обсудим эти селекторы в следующих главах.
Группировка селекторов
Часто несколько селекторов в таблице стилей используют одни и те же стилизационные правила. Вы можете сгруппировать их в список через запятую, чтобы минимизировать код в вашей таблице стилей. Это также даст вам возможность повторять одни и те же правила снова и снова. Посмотрим:
Как вы можете заметить в приведенном выше примере, то же правило стиля font-weight: normal; используется селекторами h1 , h2 и h3 , поэтому его можно сгруппировать в список через запятую, например так:
Насколько публикация полезна?
Нажмите на звезду, чтобы оценить!
Средняя оценка 4 / 5. Количество оценок: 2
Оценок пока нет. Поставьте оценку первым.
Похожие посты
- 17 декабря, 2019
- 4-5 мин.
- 464
Руководство по свойству opacity в CSS
CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…
Руководство по таблицам в CSS
Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…
Руководство по свойству margin в CSS
CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…
Разработка сайтов для бизнеса
Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.
Читайте также: