[атрибут~=значение] в CSS

Содержание

CSS [атрибут | = значение] vs [атрибут * = значение] селекторы

Почему нам нужен CSS [attribute | = value] Selector вообще, когда CSS3 [атрибут * = значение] Селектор в основном выполняет то же самое, совместимость с браузером почти похожа? Есть ли что-то, что делает первый селектор CSS, а второй не способен? Это первый раз, когда можно встретить двух очень похожих селекторов и удивляться, почему первый из них существует в первую очередь.

[ attr | = значение ] Представляет элемент с именем атрибута attr. Его значение может быть точно «value» или может начинаться со «value», за которым следует «-» (U + 002D). Его можно использовать для совпадений подкодов языка.

[ attr * = значение ] Представляет элемент с именем атрибута attr и значение которого содержит по крайней мере одно вхождение строки «значение» в качестве подстроки.

[атр | = значение]

[атр * = значение]

В том же примере кода:

Рекомендации

Между этими двумя селекторами существует много различий

Селектор [attribute | = value] используется для выбора элементов с указанным атрибутом, начиная с указанного значения.

Селектор [attribute * = value] соответствует каждому элементу, значение атрибута которого содержит указанное значение.

См. Пример, чтобы получить четкое представление об обоих селекторах.

Они совершенно разные:

Представляет элемент с именем атрибута attr. Его значение может быть точно «value» или может начинаться со «value», за которым следует «-» (U + 002D). Его можно использовать для совпадений подкодов языка.

Представляет элемент с именем атрибута attr и значение которого содержит по крайней мере одно вхождение строки «value» в качестве подстроки.

Первый селектор гарантирует, что значение атрибута начинается с представленного значения, второе — только для значения атрибута.

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

С течением времени CSS эволюционировал, и поскольку он развил потребность и хочет больше селекторов, а функции увеличились.

Селектор CSS [attribute | = value] был определен до CSS3 (последняя версия) и доступен в CSS 2.1. Как указано на странице, на которую вы ссылались:

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

Хотя это очень удобно в большинстве случаев, иногда существуют фреймворки, которые поставляются со структурированным css в from someString_somethingUseful_somethingElse для определения его класса.

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

Таким образом, в CSS3 мы увидели введение селектора [attribute * = value], который позволяет нам выбирать элементы, которые могут иметь эти ключевые слова в качестве подстроки в их определении (хотя и не обязательно спереди). См.

Селектор соответствует каждому элементу, значение атрибута которого содержит указанное значение.

[атрибут$=»значение»]CSS3-генератор ☛

Устанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным текстом.

Синтаксис ?

В первом случае стиль применяется ко всем элементам у которых значение атрибута завершается заданным текстом. А во втором — только к определенным селекторам.

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #
Пример

В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка. Стилевые свойства будут добавляться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться уже не будет.

Спецификация ?

Спецификация Статус
CSS Selectors Level 3 Рекомендация
CSS 2.1 Рекомендация
CSS 1 Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
7 1 9 3 1
Android Firefox Mobile Opera Mobile Safari Mobile
1 1 9 3

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Значения атрибутов HTML

Типы значений у атрибутов HTML

Схема HTML-тега с атрибутом и значением, выглядит следующим образом:

Схема парного тега:

Схема одиночного тега:

В статье Об атрибутах HTML, мы рассмотрели виды атрибутов, существующих в языке HTML. У разных атрибутов имеются определённые типы значений, давайте рассмотрим их:

  • Значения атрибутов событий,
  • Значения атрибутов форматирования,
  • Значения атрибутов селекторов,
  • Значения атрибута стиля,
  • Значения атрибутов указания пути (адреса, URL),
  • Значения атрибутов описания.

Значения атрибутов событий

В качестве значений атрибута события, выступает функция или JavaScript-код, их мы будем рассматривать при изучении языка программирования JavaScript и клиентской веб-технологии DOM.

Примеры, использования значений атрибутов событий:
onclick=»alert()» — в качестве значения, выступает встроенная функция JavaScript,
onclick=»myFunction()» — в качестве значения, выступает пользовательская функция JavaScript,
onmouseover=»document.getElementBy ;» — в качестве значения, выступает технология DOM.

Значения атрибутов форматирования

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

Значения атрибутов форматирования, делятся на три вида:

а) Значение размера,
б) Значение цвета,
в) Ключевое слово.

а) В качестве значений размера выступают пиксели px или проценты % , более подробно об этом вы можете прочитать в статье Единицы измерения в HTML

Примеры использования значений размера атрибутов форматирования:
height=»100px» — высота элемента 100 пикселей,
w — ширина элемента 50 процентов.

б) В качестве значений цвета могут выступать слова на английском языке (например red ) или числа в шестнадцатеричном формате (например #ff0000 ), более подробно об этом вы можете прочитать в статье Цвета в HTML

Примеры использования значений цвета атрибутов форматирования:
color=»red» — красный цвет шрифта, задан английским словом,
bgcolor=»#ff0000″ — красный цвет фона элемента, задан в шестнадцатеричном формате,
bordercolor=»green» — зелёный цвет рамки элемента, задан английским словом.

в) В качестве значений ключевого слова выступают слова которые уже встроены в язык HTML, например right , top , _blank и т.д.

Примеры использования значений ключевого слова, в атрибутах:
align=»right» — выравнивает элемент по правому краю,
valign=»bottom» — выравнивает элемент по нижнему краю,
target=»_blank» — открывает страницу в новом окне (не является атрибутом форматирования).

Значения атрибутов селекторов

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

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

Значение атрибута стиля

В качестве значения атрибута стиля выступает CSS-код, более подробно об этом вы можете прочитать в учебнике по языку CSS, в статье Внедрение атрибута style

Примеры использования значений атрибута style=» » :
style=»color: green;» — присвоить шрифту зелёный цвет green ,
style=»font-family: Arial;» — присвоить шрифту имя Arial .

Значения атрибутов указания пути

В качестве значений атрибутов указания пути (адреса) выступает адрес сайта, страницы или файла, например:

http://site.ru — абсолютный путь,
http://site.ru/stranitsa.html — абсолютный путь,

../stranitsa.html — относительный путь,
/img/myPicture.html — относительный путь.

Более подробно об адресах в HTML, а также относительных и абсолютных путях можно прочитать в статье Адреса в HTML

Примеры использования значений атрибутов указания пути:
href=»http://site.ru» — ссылка на сайт,
src=»http://gabdrahimov.ru/img/myPicture.jpg» — ссылка на файл изображения.

Значения атрибутов описания

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

Примеры использования значений атрибутов описания:
alt=»Это фотография моего кота» — описание изображения,
title=»Нажав на ссылку вы перейдёте на крутой сайт» — описание ссылки с помощью глобального атрибута title .

CSS [атрибут | = значение] против селекторов [атрибут * = значение]

Зачем вообще нужен селектор CSS [attribute | = value], когда селектор CSS3 [attribute * = value] в основном выполняет одно и то же, совместимость браузера практически одинакова? Есть ли что-то, что делает первый CSS-селектор, а второй не способен? Впервые встречаются два очень похожих селектора и удивляются, почему первый существует в первую очередь.

5 ответов

[ attr | = value ] Представляет элемент с именем атрибута attr. Его значение может быть в точности «значением» или начинаться с «значения», за которым сразу следует «-» (U + 002D). Он может быть использован для совпадений субкодов языка.

[ attr * = значение ] Представляет элемент с именем атрибута attr, значение которого содержит хотя бы одно вхождение строки «значение» в качестве подстроки.

[атр | = значение]

[атр * = значение]

В том же примере кода:

Рекомендации

Есть много различий между этими двумя селекторами

Селектор [attribute | = value] используется для выбора элементов с указанным атрибутом, начиная с указанного значения.

Селектор [attribute * = value] соответствует каждому элементу, значение атрибута которого содержит указанное значение.

Посмотрите пример, чтобы получить четкое представление об обоих селекторах.

Они заметно отличаются:

Представляет элемент с именем атрибута attr. Его значение может быть в точности «значением» или начинаться с «значения», за которым сразу следует «-» (U + 002D). Он может быть использован для совпадений субкодов языка.

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

Первый селектор гарантирует, что значение атрибута начинается с отправленного значения, второй требует, чтобы значение атрибута содержало его.

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

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

Селектор CSS [attribute | = value] был определен до CSS3 (последняя версия) и был доступен в CSS 2.1. Как отмечено на странице, на которую вы ссылаетесь:

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

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

Теперь скажите, что я хотел выбрать все элементы, в которых есть somethingUseful полезное. Вышеприведенный селектор не позволил бы мне сделать это, так как somethingUseful полезное в определениях классов находится в середине имени класса. то же самое с битом SomeElse, он расположен в конце.

Таким образом, в CSS3 мы увидели введение селектора [attribute * = value], который позволяет нам выбирать элементы, которые могут иметь эти ключевые слова в качестве подстроки в своем определении (хотя и не обязательно в начале).

селектор соответствует каждому элементу, значение атрибута которого содержит указанное значение.

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

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

Простой селектор атрибута

Применяется для установления стиля атрибута, если значение атрибута не играет никакой роли. И имеет следующий синтаксис:

В качестве примера попробуйте например прописать в таблице стилей вот такую вот строчку:

Цвет текста поменяется лишь в том случае, когда к тегу p будет применен атрибут выравнивания текста align

Атрибут со значением

Применяется тогда, когда задан атрибут с определенным значением. Синтаксис применения следующий:

На практике можно применить например следующее:

Значение атрибута начинается с определенного текста

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

Синтаксис для такого способа задания стилей имеет следующий вид:

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

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

Можете применить этот способ вот так:

Значение атрибута содержит указанный текст

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

В качестве примера я применил стиль для изменения вида ссылок где встречается название «sdcvoy»:

В результате у меня получилось следующее:

Одно из нескольких значений атрибута

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

Предлагаю посмотреть небольшой пример:

В результате должно получиться следующее:

Дефис в значении атрибута

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

Общий синтаксис применения такой:

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

Все права на сайт принадлежат Александру Побединскому.

Копирование любых материалов сайта возможно только с разрешения автора или при указании ссылки на источник.

Блог Vaden Pro

Практически все верстальщики знают о существовании селекторов атрибутов css и хоть раз да встречали у себя в коде конструкции из разряда input[type=»submit»], но лишь избранные единицы знают, что на самом деле их существует 7 разновидностей, каждая из которых открывает достаточно широкие возможности по отбору тегов из кода нашей страницы.

Описание селектора атрибутов CSS

Основная цель – отбор тегов из html кода страницы по определенному атрибуту, группе атрибутов или их значению.

Синтаксис – квадратные скобки внутри которых находится название атрибута.

Классификация и использование селекторов атрибутов

По наличию атрибута

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

По точному значению атрибута

Пожалуй наиболее часто встречающаяся разновидность данного атрибута. Задает точное соответствие. Будут выбраны только те input, у которых атрибут type задан submit.

По частичному значению атрибута

Позволяет отобрать элементы, среди заданных значений которых присутствует наше. Для лучшего понимания поясню на примере: все p у которых среди заданных классов встречается useful попадут под данный селектор. (“useful superText”- попадет, “useful”- попадет, “superText”- не попадет).

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

По конкретным значениям атрибутов

Отбор по атрибуту значение которого равно значению селектора или же содержит в себе данное значение с идущим после него дефисом.

Чтобы лучше понять скажу, что в примере элементы с lang=»en», lang=»en-us», lang=»en-au» будут выбранны, а с lang=»ru», lang=»english» нет.

По началу значения атрибута

Отберет атрибуты значение которых начинается с заданного нами. Пояснения: alt=”ponyLand”, alt=”pony can fly”, alt=”pony” – будут выбраны, alt=”I want pony” – не будет выбрано.

По окончанию значения атрибута

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

В примере будут выбраны все изображения, ссылающиеся на файлы .png.

По подстроке в значении атрибута

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

Выберутся все элементы включающие в себя интересную нам подстроку. Пояснение: ссылки с атрибутами href=”/” , href=”vaden-pro.ru”, href=” /vse-o-selektorah” – будут выбраны, а href=”http://vadenpro.ru” уже нет.

Комбинирование

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

Специальные селекторы в CSS. Соседние, дочерние, контекстные селекторы и селекторы по атрибуту тега

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

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

Комбинаторы в CSS (Соседний, дочерний и контекстный селекторы)

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

Первый комбинатор символ плюс (+) или соседний селектор. Плюс устанавливается между двумя селекторами:

Стиль в этом случае применяется к селектору 2, но только в том случае если он является соседним для селектора 1 и идет сразу после него. Рассмотрим пример:

strong + i <
color: red; /* Красный цвет текста */
>
.

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

Это обычный текст. Это жирный текст, обычный текст , и это обычный текст.

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

Комбинатор тильда (

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

Стиль будет применен к селектору 2, который должен следовать за селектором 1. Рассмотри пример:

i <
color: red; /* Красный цвет текста */
>
.

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

Это обычный текст. Это жирный текст, обычный текст , а это красный текст.

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

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

Стиль будет привязан к селектору 2, который непосредственно вложен в селектор 1.

div > strong <
font-style: italic /* Курсив */
>
.

Это обычный текст. А это обычный жирный текст.

Как видно на рисунке, правило стиля подействовало только на первый тег , который непосредственно вложен в тег

, поэтому правило на него не действует.

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

Стиль будет применен к селектору 2, если он так или иначе вложен в селектор 1.

Рассмотрим предыдущий пример, только при описании CSS правила применим контекстный селектор:

div strong <
font-style: italic /* Курсив */
>
.

Это обычный текст. А это тоже курсивный жирный текст.

Обычный текст и просто жирный текст

Как видим, на этот раз правило подействовало на оба тега , даже на тот, который вложен и в контейнер

правило css никак не действует.

Селекторы по атрибутам тега

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

1. Простой селектор атрибута

И привязывает стиль к тем элементам, внутри которых добавлен указанный атрибут. Например:

Автомобиль это механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.

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

2. Селектор атрибута со значением

Синтаксис этого селектора следующий:

Привязывает стиль к элементам, теги которых имеют атрибут с указанным именем и значением. Пример:

Как видим, оба элемента типа гиперссылка имеют атрибут target, но правило css, которое увеличивает текст ссылки в полтора раза и изменяет его цвет в красный, применяется к тегу у которого атрибут target имеет значение «_blank».

3. Одно из нескольких значений атрибута

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

Стиль применяется в том случае, если у атрибута имеется требуемое значение или оно входит в список значений, разделенных пробелами. Например:

Наш телефон: 777-77-77

Наш адрес: Москва ул. Советская 5

Получиться следующий результат:

Правило применяется к элементу, у которого среди значений атрибута class имеется значение tel.

4. Дефис в значении атрибута

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

Стиль применяется к тем элементам, у которых значение атрибута начинается с указанного значения после, которого идет дефис. Например:

В примере правило стиля применяется только к тем элементам списка, у которых имя класса начинается со значения «menu- „.

5. Значение атрибута начинается с определенного текста

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

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

В примере показано, как по разному отобразить внешние ссылки и внутренние ссылки. Внешние ссылки всегда начинаются со строки «http://». Поэтому в селекторе указываем, что стиль применять только к ссылкам, у которых атрибут href начинается со значения http://.

6. Значение атрибута заканчивается определенным текстом

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

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

Картинка формата gif

Картинка формата png

В примере все картинки с расширением gif будут отображаться с красной рамкой толщиной пять пикселей.

7. Значение атрибута содержит указанную строку

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

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

IMG[SRC*=gallery/] <
border: 5px solid red;
>
.

Картинка из папки gallery

Картинка из другой папки

В примере стиль применяется к картинкам, которые загружены из папки «gallery».

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

Кроме того напомню о специальных селекторах CSS :

    с помощью символов «+» и «

» формируются соседние селекторы;

  • символ «>» привязывает css стили к дочерним тегам;
  • символ формирует контекстные селекторы.
  • В следующих статьях мы рассмотрим также псевдоэлементы и псевдоклассы, которые предоставляют мощный инструмент управления стилями.

    Селекторы CSS – точечное применение свойств CSS к элементам страницы (тегам) | Оптимизация HTML за счёт использования селекторов

    Здравствуйте дорогие подписчики и не менее дорогие гости Site on! Надеюсь, вам были интересны предыдущие статьи раздела HTML + CSS, потому как сегодня скучать точно не придётся, ведь мы рассмотрим такое понятие как селекторы CSS и как с их помощью мы можем сократить нашу разметку HTML, сделав её чище.

    Селектор CSS – это тот элемент, к которому мы собираемся применять CSS свойства. Слово «селектор» говорит само за себя, оно обозначает выбор.

    Селекторы class и id

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

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

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

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

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

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

    В чём различие class и id?

    Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:

    То цвет текста станет красным, несмотря на то, что класс находится ниже по коду и если бы у них был равный приоритет текст стал бы синим.

    По синтаксису: в случаи с классом мы можем выбрать, у какого именно тега должен находиться данный класс, для этого после имени тега БЕЗ пробела мы должны обратиться к классу. Пример:

    Для id это тоже будет работать, но такая запись лишена всякого смысла, так как id не может повторяться на странице, а значит достаточно просто объявлять id, без тега к которому оно относится:

    Вроде бы осталось только одно неоговорённое отличие, и оно касается темы, которую в ближайшем будущем я не планировал затрагивать на этом блоге – Javascript. Но всё же обязан доложить вам о нём: если вы хотите обратиться к элементу с помощью Javascript, то для этой цели очень удобным будет наличие id у этого элемента. Чтобы обратиться к элементу по его классу в Javascript нет такой встроенной возможности, вам придётся использовать вспомогательные функции + это не всегда кроссбраузерно.

    Итог: id и class используем, но в меру, при этом всегда спрашивая себя, а можно ли здесь обойтись без них и насколько это целесообразно.

    Родственный селектор

    Идём дальше. Из статьи о наследовании в CSS вы уже знаете о двух самых простых видах селекторов, это селектор по тегу (элементу) и по потомку. Давайте освежим вашу память:

    Но как я уже писал в предыдущей статье, в первом случае CSS свойства применятся ко всем тегам p вложенным на ЛЮБУЮ глубину тега div. А что если мы хотим применить свойства только к прямым наследникам, то есть к первому уровню вложенности:

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

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

    С этим разобрались, у нас на вооружении уже 3 вида селекторов, теперь хочу вам рассказать о весьма необычном селекторе, который выделяется среди всех остальных – это так называемый универсальный селектор, который обозначается звёздочкой (*):

    Так у меня начинается каждый новый проект, советую вам делать также. Универсальный селектор распространяется на все элементы страницы (теги), но имеет нулевой приоритет (ниже только отсутствие приоритета вовсе). Его обычно используют, чтобы перебить CSS свойства, которые браузеры устанавливают по умолчанию для некоторых тегов. Представьте себе, и такое имеет место быть! Достаточно многим тегам браузеры по умолчанию устанавливают свои свойства, например, тегу гиперссылки синий цвет текста и подчёркивание, тегу body они задают поля (padding) и тд. Нам это запоминать, знать и использовать совсем не к чему, поэтому самые банальные свойства мы сразу же убираем с помощью универсального селектора, однако я бы не советовал дописывать в него что-то ещё (или дописывать, но аккуратно), несмотря на наименьший (нулевой) приоритет универсального селектора, он в некоторых случаях всё же может перебить вам другие свойства, так что имейте это в виду.

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

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

    В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся ( :first-child, :link, :visited, : lang() ):

    Естественно можно комбинировать селекторы как захотим, например:

    Название представленного выше псевдо-класса говорит само за себя first-child — первый ребёнок.

    Следующие два статических псевдо-класса применяются только к тегу гиперссылки (:link, :visited), они применяют CSS свойства в зависимости от того, посещалась данная ссылка конкретным пользователем или нет:

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

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

    Динамические псевдо-классы

    Динамические псевдо-классы – это :active, :hover, :focus. Динамические псевдо-классы срабатывают по определённому действию на странице, они работают для всех тегов, а не только для ссылок как многие думают и даже утверждают в своих блогах! Рассмотрим их применение:

    Примените данные стили к нашему примеру выше, и вы сами всё увидите.

    Смежные селекторы

    Смежные селекторы – это ближайший сосед ниже по коду, не ребёнок! Очень удобный селектор:

    Обобщённые смежные селекторы

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

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

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

    CSS 3 псевдо-классы

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

    :last-child – аналог :first-child, только берёт не первого, а последнего ребёнка.

    :only-child – сработает, если элемент (тег) является единственным ребёнком.

    :only-of-type — сработает, если элемент (тег) является единственным ребёнком своего типа.

    :nth-child() – обращается к потомкам по их порядковым номерам, можно обращаться ко всем чётным или нечётным (even или odd) числам. Например:

    :nth-last-child – работает также как и предыдущий, но отчёт начинается с конца.

    :first-of-type – первый ребёнок своего типа в рамках прямого родителя.

    :last-of-type – последний ребёнок своего типа в рамках прямого родителя.

    :empty – сработает для тех тегов, внутри которых нет ни одного символа (без текста).

    :not() – делает исключение для заданных элементов. Пример:

    Управление полями, формами, переключателями и флажками в CSS

    :enabled — применяется к доступным элементам интерфейса как формы, кнопки, переключатели и тд. По умолчанию все элементы интерфейса являются доступными.

    :disabled — применяется к заблокированным элементам интерфейса как кнопки, формы и так далее. Элементы интерфейса являются заблокированными, если к ним в HTML добавить атрибут disabled или в XHTML disabled=”disabled”.

    :checked – применяется к элементам интерфейса типа переключатели (radio) и флажки (checkbox), когда они находятся во включённом положении.

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

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

    :first-line – первая строка внутри блочного или табличного элемента.

    :first-letter – первая буква внутри блочного элемента.

    :before и :after – используются чтобы с помощью CSS вставить содержимое до или после элемента, к которому они относятся, лично я ими не пользовался, поэтому сильно расписывать не буду. А как часто вы используете данные псевдо-элементы в своих проектах? Можете поделиться своим опытом в комментариях к данной статье.

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

    Преимущества оптимизации HTML за счёт CSS

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

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

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

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

    Атрибуты HTML-тегов

    С тем, что такое HTML теги, мы уже разобрались. Мы выяснили, что у них есть содержимое. Однако это ещё не всё. У тегов также есть атрибуты, которые расширяют их возможности, а у атрибутов, в свою очередь, есть значения. С их помощью элементу можно задавать параметры, определять стиль оформления. Например, тегом

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

    Как писать атрибуты?

    Атрибуты — зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично — это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?

    Значения с атрибутами записываются в таком формате:

    Писать атрибуты всегда нужно внутри открывающего тега, после зарезервированного слова.

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

    Универсальные атрибуты

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

    • accesskey позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш Alt+1 пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.

    В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:

    • class позволяет связать тег с заранее заданным с помощью CSS оформлением. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.
    • С помощью contenteditable можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: true — правку разрешить, false — запретить.
    • При помощи атрибута contextmenu вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге , а атрибуту contextmenu присваивается его идентификатор.
    • dir определяет направление текста: слева направо (ltr) или справа налево (rtl).
    • draggable позволяет запретить (false) или разрешить (true) пользователю перетаскивать наделённый этим атрибутом элемент страницы.
    • dropzone указывает браузеру, что делать с перетаскиваемым элементом: копировать (значение copy), перемещать (move) или создать на него ссылку (link).
    • h >
    • translate разрешает (yes) или запрещает (no) перевод содержимого тега.
    • align задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение left), по правому краю (right), по центру (center) или по ширине (justify). Для изображений (тег ) также доступно выравнивание по верхней границе самого высокого элемента строки (top), по нижней границе (bottom), а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.

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

    Пример использования атрибутов

    В качестве примера рассмотрим строку HTML-кода:

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

    Разберём каждый элемент строки.

    — открывающий тег контейнера, хранящего абзац.

    Между символами > и

    Полезные ссылки:

    • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
    • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
    • Вёрстка сайта с нуля 2.0 — полноценный платный курс.

    HTML Атрибуты

    Атрибуты задаются в начальном тэге элемента и состоят из имени и значения, которые отделяются друг от друга знаком равно (=). Например в атрибуте href=»http://www.wm-school.ru/» href является именем, а http://www.wm-school.ru/ значением.

    HTML-теги могут содержать один или несколько атрибутов. Атрибуты добавляются в тег для того, чтобы информировать браузер о том, как данный тег должен отображаться в html-документе.

    Атрибут title

    Рассмотрим следующий пример:

    Имя атрибута title. В этом примере, мы дали ему значение Язык гипертекстовой разметки .

    Атрибут title может (необязательно) использоваться в любом HTML — элементе, чтобы предоставить дополнительную информацию о содержимом элемента.

    При использовании атрибута title, большинство браузеров будет отображать его значение как «всплывающую подсказку», когда пользователь наводит указатель мыши на элемент.

    Атрибут alt

    Вы уже знаете, что изображения вставляются в Web-страницы с помощью одинарного тега . Атрибут alt добавляется внутрь тera и определяет для добавленноrо на WеЬ-страницу rpaфическоrо элемента альтернативный текст. Этот текст называется альтернативным, поскольку может отображаться на экране как альтернатива самому изображению.

    В следующем примере вы увидите, как браузер работает с атрибутом alt, когда появляется «отсутствующее» изображение. Если рисунок не может быть найден или по какой-то причине не загружается, вместо него выводится значение атрибута alt. Поменяйте имя файла с изображением с orange.jpg на pencil.jpg. На самом деле такого файла не существует, поэтому вы получите «отсутствующее» изображение.

    Атрибут href

    Вы можете добавить сразу несколько атрибутов к элементу.

    Атрибут href определяет расположение веб — страницы, на которую ведет ссылка.

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

    Указывать атрибуты можно только внутри открывающих тегов и если атрибутов несколько, то между ними ставится пробел. При этом нельзя в одном теге задавать два одинаковых атрибута, даже если у них разные значения, то есть дублировать их запрещено. Атрибуты, как и теги, нечувствительны к регистру, то есть их допустимо писать заглавными и строчными буквами. Значения атрибутов можно брать в необязательные двойные (» «) или одинарные кавычки(‘ ‘).

    W3C рекомендует использовать кавычки в HTML, и требует применение кавычек для более строгих типов документов, таких как XHTML.

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

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

    Одинарные или двойные кавычки?

    Чаще всего в HTML используются «двойные кавычки», но вы можете использовать и ‘одинарные’. Иногда вам придется использовать одинарные кавычки, если в значении есть часть, которая отдельно должна быть заключена в кавычки:

    Общие атрибуты

    Ниже представлен список некоторых атрибутов, которые стандартны для большинства html-элементов:

    Атрибут Значение Описание
    align right, left, center Горизонтальное выравнивание тегов
    valign top, middle, bottom Вертикальное вырвнивание тегов внутри HTML-элемента.
    background URL Расположение фонового изображения
    id Уникальное имя Уникальное имя для использования с каскадными таблицами стилей.
    class правило класса или стиль класса Классифицирует элемент для использования с каскадными таблицами стилей.
    width Числовое значение Определяет ширину таблиц, изображений или ячеек таблицы.
    height Числовое значение Определяет высотуу таблиц, изображений или ячеек таблицы.
    title Текст подсказки Текст, отображаемый во всплывающей подсказке.

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

    Первое итоговое задание [1-4]

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

    Пришло время повторить изученное и выполнить несложные задания:

    Всплывающая подсказка

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

    Илон Маск рекомендует:  Int64 - Тип Delphi
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL