CSS3-селекторы – фундаментально полезная вещь.
Даже если вы почему-то (старый IE?) не пользуетесь ими в CSS, есть много фреймворков для их кросс-браузерного использования CSS3 из JavaScript.
Поэтому эти селекторы необходимо знать.
Основные виды селекторов
Основных видов селекторов всего несколько:
- * – любые элементы.
- div – элементы с таким тегом.
- #id – элемент с данным id .
- .class – элементы с таким классом.
- [name="value"] – селекторы на атрибут (см. далее).
- :visited – «псевдоклассы», остальные разные условия на элемент (см. далее).
Селекторы можно комбинировать, записывая последовательно, без пробела:
- .c1.c2 – элементы одновременно с двумя классами c1 и c2
- a#id. c1.c2:visited – элемент a с данным id. классами c1 и c2. и псевдоклассом visited
Отношения
В CSS3 предусмотрено четыре вида отношений между элементами.
Самые известные вы наверняка знаете:
- div p – элементы p. являющиеся потомками div .
- div > p – только непосредственные потомки
Есть и два более редких:
- div
p – правые соседи: все p на том же уровне вложенности, которые идут после div .