Сложные css селекторы – Селекторы тега, класса (class), Id и универсальные, а так же селекторы атрибутов в современном CSS

Содержание

Сложные CSS селекторы, содержащие класс и ID элементов

Перевод статьи: Multiple class ID selectors.
Автор: Chris Coyier.

Взгляните на приведенные ниже два CSS селектора. Сможете ли вы определить их функциональное отличие:

#header.callout { }
#header.callout { }

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

Верхний селектор #header.callout имеет следующую аннотацию:

Выбирает элемент, с идентификатором header и CSS классом callout.

Нижнему селектору #header.callout соответствует другое определение:

Выбирает все элементы, имеющие CSS класс callout, которые являются дочерними по отношению к элементу с идентификатором header

Возможные комбинации имен классов и идентификаторов в CSS селекторах.

Особенно полезной с практической точки зрения является возможность составления селекторов из имен классов и идентификаторов без пробелов между ними.

Комбинация из ID и имени класса.

Такой вид CSS селектора рассмотрен выше. Приведем лишь еще один наглядный пример:

Текст этого заголовка должен быть красным.

#id-name.class-name {color: red;}

Вариант из нескольких имен классов.

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

Используем несколько имен классов

.first-class-name.second-class-name {color: red;}

Сложные комбинации.

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

.snippet#header.coding.red {color: red;}

Пример использования.

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

#header {color: blue;}
#header.override {color: red;}

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

.override {color: red! important}

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

Селекторы, состоящие из нескольких имен классов, являются более популярными и полезными. Хочется обратить особое внимание на их применение в так называемом объектно ориентированном CSS стилевом оформлении документов, которое является предметом различных споров. К примеру, у вас имеется некоторое количество блоков <div>, и для их оформления вы применяете несколько описательных имен классов:

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Все присутствующие блоки используют класс box, который может содержать свойства, определяющие размерность элемента или текстуру его фона, общие для всех блоков. Кроме того, некоторые из них содержат классы с именами цветов, которые нужны для определения цветовой палитры, используемой для оформления элементов блока (текста, фона). К примеру, класс green может устанавливать зеленый фон элемента и светло-зеленый шрифт текста внутри него. Так же в примере имеются блоки, содержащие имя класса border, который, видимо, отвечает за отображение границ элемента. Те из них, у которых нет класса border, границ не имеют.

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

.box {width: 100px; float: left; margin: 0 10px 10px 0;}
.red {color: red; background: pink;}
.blue {color: blue; background: light-blue;}
.green {color: green; background: light-green;}
.border {border: 5px solid black;}

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

.red.border {border-color: #900;}

Специфичность рассмотренных селекторов.

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

Поддержка браузерами.

Все новые версии популярных браузеров, включая IE7, без проблем поддерживают такие комбинации CSS селекторов. Чего не скажешь о IE6, который, при использовании сложного селектора, производит отбор элементов только по последнему имени класса, игнорируя предыдущие. То есть, при использовании селектора .red.border в этом браузере будут выбраны блоки только с классом .border, что полностью разрушает идею рассматриваемого в статье подхода. Но если поддержка IE6 для вас привычное дело, то вы с легкостью справитесь с подобными ситуациями, обойдя их с помощью CSS хаков и условных комментариев.

Post Views: 308

Простое правило выбора CSS селекторов / Habr

Я хотел написать комментарий к статье о том куда отправляются хорошие верстальщики, но мне стало лень. А потом опять стало не лень, но мыслей накопилось уже на целый пост.

Возьмем самый первый попавшийся пример из приведенной статьи. Там в макете, в самом верху, есть полоска на всю ширину окна:

Автор принимает решение сверстать эту полоску с помощью тега


, вот так:

<body>
  <hr/>
  <!-- вся остальная страница -->
</body>
.whitesquare hr {
  /* стили для полоски  */
}

Это просто супер пример несоблюдения моего правила.

Чтобы применять правило, которое я попытаюсь сформулировать чуть позже, нужно научиться вербализировать селекторы. Что говорит селектор ".whitesquare hr"? Если помнить что .whitesquare это , то селектор говорит: "все


на сайте".

Посмотрим еще раз на CSS:

"все <hr> на сайте" {
  /* стили для верхней полоски, и только для нее */
}

Это как-то странно. То ли автор не собирался больше использовать тег


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

Возьмем еще один пример, уже не из статьи. Меню.

<nav>
  <ul>
    <li><a>...</a></li>
    <li><a>...</a></li>
    <li><a>...</a></li>
  </ul>
</nav>

Нам нужно задать стили для ссылок. Какой выбрать селектор?

  • a — все ссылки на сайте? Вряд ли …
  • li a — все ссылки на сайте, которые внутри ? Тоже нет.
    .main-menu li a — ссылка, которая внутри , который внутри .main-menu? Не совсем. В нашем меню все ссылки внутри — это лишнее уточнение.
    .main-menu a
    — любая ссылка внутри .main-menu? То что нужно.

    Пора сформулировать правило, но у меня получилось не правило, а небольшой алгоритм:

    1. Вербализируйте селектор. Ответьте на вопрос: какие элементы мне нужны? Каким элементам я хочу задать этот стиль? Ответ может быть: все ссылки на сайте; заголовок в блоке статьи; текстовое поле в форме с темой оформления «.dark-form»; эта уникальная кнопка, которая нигде не повторяется и т.д.
    2. Составьте минимально специфичный селектор выбирающий элементы которые вам нужны и только их.

    А теперь всё-таки правило:

    Пишите в селекторе то, что вы действительно имеете в виду.

Некоторые концепции для новичков: Как работают селекторы в CSS

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

В примере, приведенном ниже, CSS будет содержаться в файле с именем style.css ссылка на который будет содержаться в HTML — документе с именем index.html. Это — два разных файла. И это — одна из важных особенностей CSS, хранение дизайна отдельно от разметки.

Вот как выглядит HTML — файл:

Index.html:

<!DOCTYPE html>
 <html lang="en"> 
 <head>  
 <title> Мы изучаем селекторы!</title> 
  <link rel="stylesheet" href="style.css">
 </head>
  <body>      
<h2>Yay</h2> 
 <body> 
</html>

А CSS — файл будет содержать лишь блок селекторов, который мы видим ниже.

CSS:

HTML:

<!-- БУДЕТ работать -->
 <div></div>  
<!-- БУДЕТ работать --> 
<aside></aside>  
<!-- НЕ БУДЕТ работать --> 
<div>НЕ ВЕРНЫЙ  ID!</div>
  <!-- НЕ БУДЕТ работать --> 
<div>Это не является ID!</div>

ID-селекторы наиболее весомый тип селекторов, если речь идет о CSS — спецификации. В теории они выбивают другие типы селекторов и стили. Звучит хорошо, но на практике не значит ничего хорошего, потому что хорошо, когда есть селекторы, которые при необходимости легко можно переопределить.

CSS:

HTML:

<!-- БУДЕТ работать -->
 <div></div> 
 <!-- БУДЕТ работать --> 
<aside></aside> 
 <!-- НЕ БУДЕТ работать -->
 <div>Точка для CSS, не для HTML</div> 
 <!-- НЕ БУДЕТ работать--> 
<div>Неверный класс</div>

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

Отчасти потому, что вы можете добавить несколько классов (разделяемых пробелами) для HTML-элементов. Отчасти потому, что есть некоторые JavaScript-трики, с помощью которых вы можете манипулировать классами.

CSS:

HTML:

<!-- БУДЕТ работать --> 
<h3>Привет, мама </h3>  
<main> 
  <div>      
<!-- Будет работать--> 
     <h3> Везде </h3> 
  </div>
 </main>  
<!-- НЕ будет работать--> 
<div>Неверный тег, не сработает </div>  
<!-- НЕ будет работать -->
 <h3class="yolo"> Убедитесь, что после тега есть пробел! </h3>

Наибольшая польза от селекторов тегов ощущается при изменении свойств, которые являются уникальными для HTML — элемента. К примеру, установка list-style для элемента <ul> или tab-size для элемента <pre>. А также там, где нужно сбросить стили, которые браузер применяет к определенным элементам.

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

CSS:

HTML:

<!-- БУДЕТ работать -->
 <div data-modal="open"></div> 
 <!-- БУДЕТ работать --> 
<aside data-modal='open'></aside>
  <!-- НЕ БУДЕТ работать --> 
<div data-modal="false"> Неверное значение </div> 
 <!-- НЕ БУДЕТ работать --> 
<div data-modal>Нет значения </div> 
 <!-- НЕ БУДЕТ работать -->
 <div data-modal-open> Неверный атрибут </div>

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

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

CSS:

HTML:

<ul>   
<li>nope</li>  
 <!-- БУДЕТ работать-->  
 <li>yep, I'm #2</li>
   <li>nope</li> 
</ul>

Есть несколько различных позиционных селекторов :nth-child. Используя простые выражения (как 3n = «каждый третий«) вы можете выбирать элементы на основе их положения в HTML-документе. Вы можете поэкспериментировать с этой идеей здесь или же использовать несколько готовых рецептов.

CSS:

HTML:

<!-- БУДУТ работать -->
 <div></div>
  <!-- БУДУТ работать -->
 <aside data-blah><!-- nothin' --></aside>
  <!-- НЕ БУДУТ работать -->
 <div> </div>
  <!-- НЕ БУДУТ работать --> 
<div>
 </div>

:empty является одним из множества псевдо-селекторов, которые вы можете узнать по двоеточию (:). Как правило, они представляют собой нечто, что вы не сможете распознать по элементу или атрибуту по — отдельности.

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

Селекторы можно объединять:

CSS:

.module.news {    
 /* Выбирает элементы из этих классов */
 } 
#site-footer::after {   
/* Добавляет  контент после элемента с ID */ 
} 
section[data-open] {  
 /* Выбирает только элементы раздела, если у них есть этот атрибут */ 
}

Есть также комбинации селекторов, таких как ~ и + и > которые влияют на селекторы, следующим образом:

CSS:

.module > h3 {   
/* Выбирает h3 элементы, которые являются прямыми потомками элемента этого класса */ 
}  
h3 + p {  
 /* Выбирает элементы p которые следуют непосредственно за элементом h3 */
 } 
li ~ li {   
/* Выбирает элементы li которые родственны (и следуют) за другими элементами li. */
 }

Данная публикация представляет собой перевод статьи «Beginner Concepts: How CSS Selectors Work» , подготовленной дружной командой проекта Интернет-технологии.ру

Тонкости использования селекторов аттрибутов в CSS / Habr

CSS может связываться с HTML элементами используя любые из его атрибутов. Вы наверняка знаете о классах и ID. Проверим это в HTML:
<h3 rel="friend">David Walsh</h3>

Этот один элемент имеет три аттрибута: ID, class и rel. Для выбора элемента в CSS вы можете использовать селектор ID (#first-title) и селектор class (.magical). Но знаете ли вы, что можно использовать для выбора атрибут rel? Это так называемый селектор атрибута:
h3[rel=friend] {
  /* woohoo! */
}


Существует множество селекторов атрибутов, мы не будем рассматривать все возможные варианты, рассмотрим наиболее полезные сценарии, встречающиеся в реальном мире.
В примере выше, мы использовали атрибут со значением «friend» у элемента h3. CSS селектор, который мы написали, нацелен на элемент h3, потому что его атрибут rel имеет значение «friend». Другими словами, знак равенства означает точное соответствие. Рассмотрим другие примеры.
<h2 rel="external">Attribute Equals</h2>

h2[rel=external] { color: red; }

Более реальный пример из жизни — это стилизация списка блогов. Например у вас есть список ссылок на сайты друзей:
<a href="http://perishablepress.com">Jeff Starr</a>
<a href="http://davidwalsh.name">David Walsh</a>
<a href="http://accidentalninja.net/">Richard Felix</a>

Вы хотите сделать различные стили для каждой из ссылок. Традиционный способ — задать каждой ссылке имя класса, но это требует дополнительной разметки, что не всегда хорошо (для семантики и прочего). Другой способ — это использование :nth-child, но для этого потребуется неизменный порядок списка. В данном случае идеальным решением будет использование селекторов атрибутов… Ссылки уже имеют уникальные атрибуты.
a[href=http://perishablepress.com] { color: red; }

Я думаю, что чаще всего селекторы атрибутов используют для элементов input. Это text, button, checkbox, file, hidden, image, password, radio, reset и submit. Все они являются элементом <input/> и все они очень разные. Так что делать, что то вроди input {padding: 10px;}, почти всегда плохая идея. Поэтому очень часто можно увидеть, нечто похожее на это:
input[type=text] { padding: 3px; }
input[type=radio] { float: left; }

Это единственный способ получить различные типы инпутов без добавления дополнительной разметки.
Именно здесь становится более интересно. Знаку равенства в селекторе атрибута могут предшествовать другие символы изменяющие значение. Например, «*=» означает нахождение искомого значения в любом месте значения атрибута. Посмотрим на пример:
<h2 rel="xxxexternalxxx">Attribute Contains</h2>

h2[rel*=external] { color: red; }

Помните, что классы и ID тоже являются атрибутами, и могут быть использованы селектором атрибута. Допустим вы пишете CSS для сайта в котором вы не можете контролировать разметку и разработчики сделали три дива:
<div></div>
<div></div>
<div></div>

Вы можете выбрать их все:
div[id*=post] { color: red; }

<h2 rel="external-link yep">Attribute Begins</h2>

h2[rel^=external] { color: red; }

Реальным примером использования может быть случай, когда вам нужно, что бы любая ссылка на сайт друга отличалась от других ссылок. Не важно это ссылка на главную страницу или внутреннюю, стиль должен быть одним.
a[href^=http://perishablepress.com] { color: red; }

Это будет соответствовать ссылке на главную и второстепенные страницы.
Мы можем выбирать основываясь на начальном значении атрибута, почему бы не выбирать с конечного?
<h2 rel="friend external">Attribute Ends</h2>

h2[rel$=external] { color: red; }

Честно говоря, я изо всех сил пытаюсь найти реальный пример использования этого. К примеру вы можете найти ссылки имеющие в конце определенные символы.
a[href$=#], a[href$=?] { color: red; }

Вы наверняка знаете, что к элементу можно применять несколько классов. Если вы это сделаете, вы можете использовать .class-name в CSS для связи. В селекторе атрибута не все так просто. Если ваш атрибут имеет несколько значений (например список разделенный пробелами) вам прийдется использовать «~=».
<h2 rel="friend external sandwich">Attribute Space Separated</h2>

h2[rel~=external] { color: red; }

Вы можете подумать, зачем это использовать, когда «*=» найдет то же самое и будет более гибким? Действительно, более универсально, но может быть слишком универсальным. Этот селектор требует места вокруг значения, когда *= нет. Так что если у вас есть два элемента, один с атрибутом rel="home friend-link", другой rel="home friend link". Вам понадобится селектор разделенный пробелами для связи с вторым элементом.
Список разделенный тире очень похож на список разделенный пробелами, и его так же используют для более строгого соблюдения правил, чем при использовании *=.
<h2 rel="friend-external-sandwich">Attribute Dash Separated</h2>

h2[rel|=external] { color: red; }

Вы можете использовать несколько селекторов атрибутов в одном селекторе, который требуют совпадения от всех условий.
<h2 rel="handsome" title="Important note">Multiple Attributes</h2>

h2[rel=handsome][title^=Important] { color: red; }

Поддержка браузерами


Каждый приведенный выше пример работает во всех современных браузерах: Safari, Chrome, Firefox, Opera и IE. Internet Explorer обладает превосходной поддержкой всего этого в 7 версии и нулевой поддержкой в 6 версии. Что бы протестировать в браузере — откройте тестовую страницу. Если строка/селектор красная — значит селектор работает.

Селекторы CSS — полное руководство с примерами

Селекторы CSS

Сегодня мы рассмотрим такое понятие как селекторы CSS и как с их помощью мы можем сократить нашу разметку HTML, сделав её чище.

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

p {color: red}

div span {background: green}

ul li {list-style: none}

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

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

<div>текст в первом диве</div>

<div>текст во втором диве</div>

<div>текст в третьем диве</div>

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

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

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

Смотрим пример:

#first {color: red;} /* обращаемся к id с именем first */

.second {color: blue;} /* обращаемся к классу с именем second */

#first .second {color: orange;} /* обращаемся к классу с именем second, ТОЛЬКО если он находится ВНУТРИ тега с идентификатором first */

.first .third {color: grey;} /* обращаемся к классу с именем third, ТОЛЬКО если он находится ВНУТРИ тега с классом first */

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

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

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

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

 <style>

#first {color: red;}

.blue {color: blue;}

</style>

<div>текст в диве</div>

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

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

.myclass {свойства} /* применятся ко всем тегам, которые содержат класс myclass */

div.myclass {свойства} /* применятся только к тегам div, которые содержат класс myclass */

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

<style>

#super {свойства} /* правильно */

div#super {свойства} /* Неправильно, но работать будет */

</style>

<div>текст</div>

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

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

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

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

 div p {color: green;} /* Селектор по потомку */

p {color: red;} /* селектор по тегу */

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

<div>

  <p>Прямой наследник (первый уровень)</p>

  <span>

    <span>

      <p>Третий уровень</p>

    </span>

  </span>

  <p>Прямой наследник (первый уровень)</p>

  <span>

    <p>Второй уровень</p>

  </span>

  <p>Прямой наследник (первый уровень)</p>

</div>

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

div>p {color: blue;} /* только первый уровень вложенности */

div p {color: blue;} /* абсолютно все параграфы внутри div */

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

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

* {margin: 0; padding: 0;}

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

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

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

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

<style>

p:first-child {color: green;} /* сработает, если p является первым ребёнком своего родителя */

</style>

<div>

  <p>Прямой наследник (первый уровень)</p>

  <span>

    <span>

      <p>Третий уровень</p>

    </span>

  </span>

  <p>Прямой наследник (первый уровень)</p>

  <span>

    <p>Второй уровень</p>

  </span>

  <p>Прямой наследник (первый уровень)</p>

</div>

Результат:

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

div>span p:first-child {color: green;} /*сработает, если p является первым ребёнком своего родителя и находится внутри тега span, который является прямым потомком тега div */

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

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

a:link {color: blue;} /* у не посещённых ссылок задаём синий цвет, и по умолчанию они подчёркнуты */

a:visited {color: green; text-decoration: none;} /* у посещённых ссылок текст будет красным, убираем подчёркивание */

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

q:lang(de) {quotes: "\201E" "\201C";} /* кавычки для немецкого языка */

q:lang(en) {quotes: "\201C" "\201D";} /* кавычки для английского языка */

q:lang(ru) {quotes: "\00AB" "\00BB";} /* кавычки для русского языка */

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

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

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

p:active {background: red;} /* стиль, который применится к тегу по нажатию на него (клику мышью) */

input:focus {width: 400px;} /* стиль, который применится к элементу, на котором в данный момент фокус (работает, к примеру, для текстовых полей ввода: textarea, input). В данном случае по взятию в фокус, ширина input станет равна 400 пикселей, удобно использовать для красивого эффекта удлинения поля по клику. */

div:hover {background: green;} /* срабатывает по наведению курсора на элемент, в основном применяется для создания красивого эффекта при наведении на ссылки. */

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

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

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

<style>

div + p {background: green; color: white;} /* Применить свойства к тегу p, если сразу после закрывающегося тега div открывается тег p */

p + span {background: orange;} /* не сработает, так как у нас нет открывающегося тега span, сразу после закрывающегося тега p */

</style>

<div>

  <p>текст в параграфе первого div</p>

</div>

<p>текст в параграфе ВНЕ div</p>

<div>

  <p>текст в параграфе второго div</p>

</div>

<span>текст в спане</span>

<p>снова параграф вне div</p>

Результат:

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

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

<style>

div~p{color: green;}

</style>


<div>текст в диве</div>
<p>параграф</p> <p>параграф</p> <p>параграф</p>
<span>текст в спане</span>
<p>параграф</p> <p>параграф</p>
<div> <p>параграф в диве</p> <p>параграф в диве</p> </div>
<span>текст в спане</span> <p>параграф</p>

Результат:

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

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

p[align] {свойства} /* применить ко всем тегам p, у которых есть атрибут align */p[align="center"] {свойства} /* где значение атрибута align равно center */p[align^="center"] {свойства} /* где значение атрибута align начинается на center */p[align*="center"] {свойства} /* где значение атрибута align содержит center */p[class~="site"] {свойства} /* где site может находиться среди других слов, отделенных пробелами (<p></p>) */p[class|="site"] {свойства} /* где значение атрибута class состоит только из слова site или начинается им, после чего ставится дефис и пишется остальная часть значения (<p></p> или <p></p>) */p[class$="site"] {свойства} /* где значение атрибута align заканчивается на center */

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

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

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

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

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

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

<style>

div p:nth-child(5) {background-color: green;} /* Обращаемся к 5 по счёту ребёнку, если он является тегом p. */div p:nth-child(2n) {background-color: yellow;} /* Обращаемся к каждому второму ребёнку, если он является тегом p. */div p:nth-child(2n+6) {background-color: red;} /* Обращаемся к каждому второму ребёнку начиная с шестого, если он является тегом p. */

</style>


<div> <p>параграф</p> <p>параграф</p> <p>параграф</p>
<span>текст в спане</span>
<p>параграф</p> <p>параграф</p> <p>параграф</p> <p>параграф</p> <p>параграф</p> <p>параграф</p> </div>

Результат:

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

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

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

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

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

<style>

p:not(.roll) {color: red;} /* для всех параграфов на странице делаем красный цвет текста, за исключением параграфов с классом roll */

</style>


<p>параграф с классом roll</p>
<p>параграф</p> <p>параграф</p>
<p>параграф с классом roll</p>

Результат:

Управление полями, формами, переключателями и флажками в 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 (поисковой оптимизации), а также более чистый код.

Соседние селекторы | CSS | WebReference

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

Синтаксис ?

E + F { Описание правил стиля }

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами E и F. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него. Рассмотрим несколько примеров.

<p>Lorem ipsum <b>dolor</b> sit amet.</p>

Элемент <b> является дочерним по отношению к <p>, поскольку он находится внутри этого контейнера. Соответственно <p> выступает в качестве родителя <b>.

<p>Lorem ipsum <b>dolor</b>  <var>sit</var> amet.</p>

Элементы <var> и <b> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <p>, не влияет на их отношение.

<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>

Соседними здесь являются элементы <b> и <i>, а также <i> и <tt>. При этом <b> и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.

Браузеры

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

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

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

×

30 CSS-селекторов, о которых полезно помнить

  • Главная
  • ->
  • Материалы
  • ->
  • 30 CSS-селекторов, о которых полезно помнить

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

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

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

*Наведите курсор мыши для приостановки прокрутки.

Назад Вперед


30 CSS-селекторов, о которых полезно помнить

Итак, Вы разобрались с основными селекторами: id, class, селекторами потомков. И все? Если да, то Вы теряете очень много в плане гибкости управления внешним видом элементов на странице.

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

1. *


* {
 margin: 0;
 padding: 0;
}

Начнем с простейших вещей для новичков, прежде чем перейдем к продвинутым селекторам.

Символ звездочки позволяет выбрать все элементы на странице. Многие веб-разработчики используют это для «обнуления» всех внешних и внутренних отступов.

Также символ * можно использовать для дочерних элементов объекта.


#container * {
 border: 1px solid black;
}

Этот код нацелен на все элементы, которые являются дочерними по отношению к блоку с идентификатором container.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

2. #X


#container {
   width: 960px;
   margin: auto;
}

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

«Спросите себя: Мне точно необходимо использовать id для какого-то элемента, чтобы сослаться на него?»

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

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

3. .X


.error {
  color: red;
}

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

В противном случае используйте id для нахождения «иголки в стоге сена» и применения стиля только к одному конкретному объекту.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

4. X Y


li a {
  text-decoration: none;
}

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

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

«Совет: Если Ваш селектор похож на X Y Z A B.error, то Вы, вероятно, что-то делаете на так. Всегда спрашивайте себя, действительно ли это самый простой способ»

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

5. X


a {color: red;}
ul {margin-left: 0px;}

Что, если Вы хотите сослать на все элементы определенного типа на странице, если у них нет id или классов? Делайте проще, используйте селекторы типа. Если Вам нужно выбрать все неупорядоченные списки, используйте ul{}.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

6. X:visited и X:link


a:link {color: red;}
a:visited {color: purple;}

Здесь мы используем псевдо-класс :link для выбора всех ссылок, на которых еще не был совершен клик.

Также есть псевдо-класс :visited, который, как Вы и ожидали, позволяет нам применить стиль только к тем ссылкам, по которым был совершен клик или переход.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

7. X + Y


ul + p {
   color: red;
}

Это так называемый смежный селектор. В этом случае каждый параграф следующий сразу после каждого элемента ul будет красного цвета.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

8. X > Y


#container > ul {
  border: 1px solid black;
}

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


<div>
      <ul>
         <li>Элемент списка
           <ul>
              <li>Потомок</li>
           </ul>
         </li>
         <li>Элемент списка</li>
         <li>Элемент списка</li>
         <li>Элемент списка</li>
      </ul>
</div>

Селектор #container > ul выберет только те элементы ul, которые являются прямыми потомками блока div с идентификатором container. Т.е. в данном случае этот селектор не отберет элемент ul, который является потомком первого элемента li.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

9. X ~ Y


ul ~ p {
   color: red;
}

Эта комбинация сестринских (сиблинговых) элементов похожа на X + Y, но она менее строгая. Если в случае ul + p будут выбраны только первые элементы p, следующие за ul (т.е. наблюдается смежность в выборе), то рассматриваемый нами сейчас селектор более общий.

В нашем случае он отберет все элементы p, следующие за элементом ul.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

10. X[title]


a[title] {
   color: green;
}

Здесь мы обращаемся к атрибуту селектора. В нашем примере будут окрашены в зеленый цвет только ссылки, имеющие атрибут title.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

11. X[href=»foo»]


a[href="http://www.codeharmony.ru"] {
  color: red;
}

Код выше позволит придать стиль всем ссылкам, атрибут href у которых равен http://www.codeharmony.ru. Эти ссылки будут красного цвета. Остальные ссылки не получат данного стиля.

Это работает хорошо, но это немного негибко. Что, если ссылка на самом деле ведет на Codeharmony.ru но, возможно, адрес указан, как codeharmony.ru а не http://www.codeharmony.ru? В таких случаях мы можем использовать основы регулярных выражений.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

12. X[href*=»codeharmony»]


a[href*="codeharmony"] {
  color: red;
}

Поехали дальше; это как раз то, что нам нужно. Звездочка означает, что искомое значение может находиться в любой части атрибута href. Таким образом, мы можем отобрать и http://www.codeharmony.ru и www.codeharmony.ru и codeharmony.ru.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

13. X[href^=»http»]


a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

Вы когда-нибудь думали о том, как на некоторых сайтах рядом с ссылками, ведущими на другие сайты (внешние по отношению к текущему) проставлены небольшие иконки, которые дают знать об этом пользователю? Это отличные «напоминалки» пользователю о том, что ссылка ведет на другой сайт.

Делается это с помощью символа ^ (карат). Он обычно используется в регулярных выражениях для обозначения начала строки. Если мы хотим отобрать ссылки, у которых атрибут href начинается с http, то мы можем использовать селектор из примера выше.

«Обратите внимание, что мы не ищем http://. Это необязательно и, к тому же, не учитывает ссылки по протоколу https://.»

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

14. X[href$=».jpg»]


a[href$=".jpg"] {
   color: red;
}

И снова мы используем регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением .jpg. Разумеется, такой подход не будет работать для картинок с расширениями .gif, .png и т.д.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

15. X[data-*=»foo»]


a[data-filetype="image"] {
   color: red;
}

Как же мы можем охватить различные типы картинок? Мы можем создать, например, несколько селекторов:


a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}

Но это муторно и не элегантно. Другой вариант — это создать собственный атрибут data-filetype и добавить его к каждой ссылке, ведущей на картинку.


<a href="path/to/image.jpg" data-filetype="image">Ссылка</a>

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


a[data-filetype="image"] {
   color: red;
}

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

16. X[foo~=»bar»]


a[data-info~="external"] {
   color: red;
}

a[data-info~="image"] {
   border: 1px solid black;
}

Вот еще один интересный трюк, о котором не все знают. Знак ~ (тильда) позволяет нам выбирать атрибуты со значениями, разделенными пробелами, т.е.


<a href="path/to/image.jpg" data-info="external image">Кликни сюда</a>

Используя данный прием мы можем делать выборки с нужными нам комбинациями:


/* Отобрать атрибут data-info, который содержит значение external */
a[data-info~="external"] {
   color: red;
}

/* и отобрать атрибут data-info, который содержит значение image */
a[data-info~="image"] {
  border: 1px solid black;
}


Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

17. X:checked


input[type=radio]:checked {
   border: 1px solid black;
}

Этот псевдо-класс отбирает те элементы, которые были отмечены, например, радиокнопку или чекбокс.

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

18. X:after

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


.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }

.clearfix {
   *display: inline-block;
   _height: 1%;
}

Данный пример показывает, как с помощью псевдо-класса :after после блока с классом .clearfix создаётся пустая строка, после чего очищается. Хороший метод, когда невозможно применить overflow: hidden.

Совместимость:

* IE8+
* Firefox
* Chrome
* Safari
* Opera

19. X:hover


div:hover {
  background: #e3e3e3;
}

Это Вы точно знаете. Официальное название звучит вроде «псевдо-класс, основанный на действии пользователя». Звучит страшновато, хотя на деле все просто. Хотите применить к элементу определенный стиль, когда на него наводится курсор мыши? Это оно самое!

«Помните, что старые версии IE не понимают этого псевдо-класса по отношению к чему-бы то ни было, кроме тэга а.»

Часто данный прием используется для задания нижней границы для ссылок при наведении на них курсора:


a:hover {
 border-bottom: 1px solid black;
}

«Мега-чит: border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;»

Совместимость:

* IE6+ (в IE6 работает только по отношению к ссылкам)
* Firefox
* Chrome
* Safari
* Opera

20. X:not(selector)


div:not(#container) {
   color: blue;
}

Отрицание может быть также очень полезным. Предположим, я хочу выбрать все блоки div, кроме одного с идентификатором container. Для этого отлично подойдет код выше.

Если же мне нужно выбрать все элементы, кроме тэгов параграфов, то можно написать так:


*:not(p) {
  color: green;
}

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

21. X::pseudoElement


p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

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

Выбираем первую букву параграфа:


p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

Этот кусок кода найдет все параграфы на странице и применит к первой букве каждого из них указанные стили. Часто это используется для создания эффекта «газетного заголовка».

Выбираем первую строку параграфа:


p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

Аналогично предыдущему примеру, но в данном случае будет выбрана первая строка каждого параграфа.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

22. X:nth-child(n)


li:nth-child(3) {
   color: red;
}

Помните времена, когда мы не имели возможности обратиться к конкретному порядковому элементу-потомку? Данный псевдо-класс решает эту проблему!

В качестве параметра принимается целое число. Если нужно выбрать 2-й элемент списка, нужно использовать конструкцию: li:nth-child(2).

Мы можем даже выбирать группы элементов-потомков. К примеру, чтобы выбрать каждый четвертый элемент списка, нужно использовать конструкцию: li:nth-child(4n).

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari

23. X:nth-last-child(n)


li:nth-last-child(2) {
   color: red;
}

Что, если у Вас есть большой неупорядоченный список и Вам нужно, к примеру, выбрать третий элемент с конца. Вместо того, чтобы писать li:nth-child(397), Вы можете воспользоваться псевдо-классом nth-last-child.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

24. X:nth-of-type(n)


ul:nth-of-type(3) {
   border: 1px solid black;
}

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

Представьте, что на странице есть пять неупорядоченных списков. Если Вам нужно применить стили только к третьему списку, но у него нет уникального идентификатора и иных «зацепок», то можно воспользоваться псевдо-классом nth-of-type(n). В коде выше показан способ придания стиля только третьему неупорядоченному списку.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari

25. X:nth-last-of-type(n)


ul:nth-last-of-type(3) {
   border: 1px solid black;
}

Да, для полноты картины есть и такой вариант. Так можно выбрать n-ный элемент определенного типа с конца.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

26. X:first-child


ul li:first-child {
   border-top: none;
}

Этот псевдо-класс позволяет выбрать только первого потомка родительского элемента. Часто используется для удаления границ первого и последнего элементов списка.

К примеру, если у вас есть список рядов, каждый из которых имеет border-top и border-bottom, то последний и первый элементы списка будут немного выбиваться из общего строя.

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

Совместимость:

* IE7+
* Firefox
* Chrome * Safari
* Opera

27. X:last-child


ul > li:last-child {
   color: green;
}

В противоположность классу first-child, last-child выберет последний элемент родительского элемента.

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

28. X:only-child


div p:only-child {
   color: red;
}

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

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

Давайте рассмотрим для наглядности такую разметку:


<div><p>Здесь идет единственный в блоке параграф.</p></div>

<div>
   <p>Здесь идет первый параграф в блоке.</p>
   <p>Здесь идет второй параграф в блоке.</p>
</div>


В этом случае параграфы во втором блоке div выбраны не будут. Стиль будет применен только к параграфу из первого блока div.

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

29. X:only-of-type


li:only-of-type {
   font-weight: bold;
}

Этот псевдо-класс выбирает элементы, которые не имеют сестринских элементов в содержащем их контейнере. Например, давайте выберем все ul, которые содержат одинокие li.

Вы могли бы написать ul li, но этот способ выберет все элементы li. Единственный способ — использовать only-of-type.


ul > li:only-of-type {
   font-weight: bold;
}

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

30. X:first-of-type

Этот псевдо-класс позволяет отобрать первого сиблинга того же типа.

Чтобы лучше это понять, скопируйте в свой редактор следующий код:


<div>
   <p>Здесь параграф.</p>
   <ul>
      <li>Элемент 1.</li>
      <li>Элемент 2.</li>
   </ul>

   <ul>
      <li>Элемент 3.</li>
      <li>Элемент 4.</li>
   </ul>
</div>

Сейчас, не читая дальше, попробуйте придать стиль только «элементу 2». Когда догадаетесь (либо сдадитесь), читайте дальше.

Решение 1

Есть много способов решить данную задачу. Рассмотри лишь некоторые из них. Начнем с использования first-of-type:


ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}

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

Решение 2

Другой вариант — воспользоваться смежным селектором:


p + ul li:last-child {
   font-weight: bold;
}

Здесь мы находим ul, следующий непосредственно за тэгом параграфа, после чего находим самый последний его дочерний элемент.

Решение 3

Можно еще немного поиграть с селекторами и поступить таким образом:


ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;
}

Сейчас мы уже получаем первый элемент ul на странице, затем ищем самый первый элемент li, но начиная с конца.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

Вывод

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

Если Вы работаете с какими-либо JavaScript-библиотеками, например, с jQuery, то всегда старайтесь использовать «родные» CSS3 селекторы, когда это возможно. В этом случае Ваш код будет работать быстрее.

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

По материалам www.net.tutsplus.com
Перевод — Дмитрий Науменко.

P.S. Уже верстаете сайты или планируете глубже освоить CSS? Посмотрите еще серию бесплатных видео по резиновой верстке и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!


Смотрите также:

Наверх

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *