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

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

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

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

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

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

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

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

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

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

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

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

* {

border: 1px solid #000000;

}

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

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

img[alt] {

border: 1px solid #000000;

}

Обратите внимание на квадратные скобки.

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

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

img[src="alert.gif"] {

border: 1px solid #000000;

}

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