Дополнительные селекторы CSS

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

· Универсальные селекторы: универсальные селекторы можно использовать для выбора каждого элемента на странице.

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

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

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

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

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

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

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

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

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

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

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

Вы можете не считать, что это очень полезно, но опять же это может быть полезно для целей отладки. Значительно более полезной является возможность выбирать определенные части атрибутов, например, расширения файлов. И такая возможность на подходе — CSS 3 фактически вводит три новых типа селекторов атрибутов, которые могут выбирать на основе текстовой строки в значениях атрибутов (в начале, конце, или в любом месте в значении). Прочтите статью Кристофера Шмитта о селекторах атрибутов в CSS 3 (http://dev.opera.com/articles/view/css-3-attribute-selectors/).

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

Селекторы потомоков не поддерживаются в браузере IE 6 или более младших версиях.

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

В этом фрагменте элемент div является предком всех других элементов. Он имеет двух потомоков, em и p. Элемент p имеет один элемент потомок, еще один em.

Можно использовать селектор потомоков для выбора только em непосредственно внутри div следующим образом:

Если вместо этого использовать селектор нижележащих следующим образом:

Селекторы смежных одноуровневых элементов

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

Селекторы смежных одноуровневых элементов не поддерживаются в браузере IE 6 или более младших версиях.

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

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

·:link - обычное состояние ссылок по умолчанию, когда вы впервые их находите.

·:visited - ссылки, которые вы уже посетили в используемом в данный момент браузере.

·:focus - ссылка (или поле формы, или что-то еще), в которой в данный момент находится курсор клавиатуры.

·:hover - ссылка, на которой в данный момент находится указатель мыши.

·:active - ссылка, на которой в данный момент происходит щелчок.

Следующие правила CSS делают так, что по умолчанию ссылки будут синими (в большинстве браузеров все равно используется по умолчанию). Когда курсор мыши оказывается над ссылкой, используемое по умолчанию подчеркивание ссылки исчезает. Мы хотим получить такой же эффект, когда ссылка попадает в фокус клавиатуры, поэтому дублируем правило:hover c использованием:focus. Когда ссылка будет посещена, она станет серой. Наконец, когда ссылка активна, она становится жирной, как дополнительный признак, что что-то сейчас произойдет.

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

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

Затем я должен взглянуть на:first-child - этот псевдо-класс выбирает все экземпляры элемента, который является первым элементом-потомком своего предка, поэтому, например, следующее правило выбирает первый объект списка (маркированного или нумерованного) в любом списке и делает его текст жирным:

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

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

Первая буква каждого параграфа будет теперь жирной и на 300% больше остального параграфа, и будет иметь красный фон.

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

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

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

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

Можно также вставить увеличивающиеся цифровые значения после повторяющихся элементов (таких как маркеры списка или параграфы), используя функцию counter() — это объясняется более подробно в статье на сайте http://dev.opera.com article по счетчикам CSS (http://dev.opera.com/articles/view/automatic-numbering-with-css-counters/).

Эти селекторы не поддерживаются в IE 6 или более младших версиях. Отметим также, что нежелательно вставлять важную информацию с помощью CSS, или этот контент будет недоступен вспомогательным технологиям, или если пользователь решит не использовать вашу таблицу стилей. Золотое правило состоит в том, что CSS предназначен для оформления, а HTML предназначен для важного контента.

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

В этом разделе я уже использовал сокращенную запись, не говоря об этом. Правило border: 2px solid black; является сокращением для отдельно определяемых border-width: 2px;, border-style: solid; border-color: black;.

Что делает отдел по эксплуатации и сопровождению ИС? Отвечает за сохранность данных (расписания копирования, копирование и пр.)...

Система охраняемых территорий в США Изучение особо охраняемых природных территорий(ООПТ) США представляет особый интерес по многим причинам...

Что будет с Землей, если ось ее сместится на 6666 км? Что будет с Землей? - задался я вопросом...

Что вызывает тренды на фондовых и товарных рынках Объяснение теории грузового поезда Первые 17 лет моих рыночных исследований сводились к попыткам вычислить, когда этот...

Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте: