Страницы сайта
Список селекторов CSS
Главная страница / Список селекторов CSS
Селектор Описание, пример
Универ­сальный Универсальный селектор соответствует любому элементу, например, следующая запись обнулит отступы для всех элементов веб-сайта: 

* {margin: 0;}
Элемента Селекторы элементов используются для определения стилей элементов для всех страниц веб-сайта, например, стиль заголовков h1 или общий стиль абзацев: 

h1 {font-family: Lobster, cursive;} 
p {letter-spacing: 0.1em;}
Класса

Селекторы класса используются для определения стилей для нескольких элементов одного типа, размещенных в разных частях или на разных страницах веб-сайта.
Для создания заголовка класса headline необходимо добавить атрибут class с соответствующим значением в открывающий тег <h1>.
Далее необходимо задать стиль для указанного класса. Данный стиль оформления можно применить и для других элементов. 

Код HTML: 
<h1 class="headline">Инструкция пользования персональным компьютером</h1> 

Код CSS: 
.headline { 
text-transform: uppercase; 
color: lightblue;}

Идентифи­катора Селекторы идентификатора используются для присваивания стиля [b]одному[/b] конкретному элементу. Идентификатор id элемента можно использовать в документе только один раз, так как он выделяет уникальный элемент. 

#sidebar { 
text-transform: uppercase; 
color: lightblue;}
Потомка К потомкам элемента относятся его дочерние элементы. Селекторы потомков позволяют стилизовать все вложенные элементы, например, можно отформатировать внешний вид элементов маркированного списка: 

ul li {text-transform: uppercase;} – выберет все элементы li, являющиеся потомками всех элементов ul

Если нужно отформатировать потомки определенного элемента, то можно задать ему стилевой класс: 
p.first a {color: green;} – означает, что нужно применить данный стиль ко всем ссылкам, потомкам абзаца, относящегося к классу с именем first
p .first a {color: green;} -если добавить пробел, то будут выбраны ссылки, расположенные внутри любого тега класса .first, который является потомком элемента <p>
.first a {color: green;} – данный стиль применяется к любой ссылке, расположенной внутри других тегов, обозначенных классом .first.
Дочерний Дочерний тег является прямым потомком содержащего его тега, т.е. отношения "родители-дети” существуют между элементами и теми элементами, которые содержатся непосредственно внутри них. У одного элемента может быть несколько дочерних элементов, а родительский элемент может быть у каждого элемента только один. 
p > strong – выбирает все элементы strong, являющиеся дочерними по отношению к элементу p.
Сестрин­ский Сестринские отношения возникают между элементами, имеющими общего родителя. Селекторы сестринских элементов позволяют выбрать теги из группы элементов одного уровня. 
h1 + p – выберет все первые абзацы, идущие непосредственно за любым тегом <h1>, не затрагивая остальные абзацы. 
h1 ~ p – выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие после него. 
Атрибута Селекторы атрибутов позволяют форматировать элементы на основе выборки любых содержащихся в них атрибутов или значений атрибутов, варианты: 

[атрибут] – выбирает все элементы, для которых задан указанный атрибут. 
img[alt] – выбирает все картинки, содержащие атрибут alt
img[title="flower"] – выбирает все картинки, название которых содержит слово flower
a[href^="http://"] – выбирает все ссылки, начинающиеся на http://
img[src$=".png"] – выбирает все картинки, название которых заканчивается на .png
a[href*="ru"] – выбирает все ссылки, название которых содержит слово ru
input[type="text"] – выбирает только текстовые поля формы. 
article[class~="feature"] – выбирает статьи по частичному значению атрибута, т.е. статьи, название класса которых содержит данное слово. 
article[id|="feature"] – выбирает элемент, атрибут которого эквивалентен feature или начинается на feature.
Псевдокласс Псевдоклассы – это классы, фактически не прикрепленные к тегам html-кода. Они вызывают CSS-правила при совершении того или иного события или подчиняющиеся тому или иному правилу: 

a:link – ссылается на не посещенную ссылку. 
a:visited – ссылается на уже посещенную ссылку. 
a:hover – ссылается на любой элемент, по которому проводят курсором мыши. 
a:focus – ссылается на любой элемент, над которым находится курсор мыши. 
a:active – ссылается на элемент, который был активизирован пользователем. 
:valid – выберет поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу. 
:invalid – выберет поля формы, содержимое которых не соответствует указанному типу. 
:enabled – выберет все доступные (активные) поля форм. 
:disabled – выберет заблокированные поля форм, т.е., находящиеся в неактивном состоянии. 
:in-range – выберет поля формы, значения которых находятся в заданном диапазоне. 
:out-of-range – выберет поля формы, значения которых не входят в установленный диапазон. 
:lang() – выбирает абзацы на указанном языке. 
:not(селектор) – выберет элементы, которые не содержат указанный селектор, например, класс, идентификатор или селектор элемента :not([type="submit"])
:target – выбирает элемент с символом #, на который ссылаются в документе. 
:checked – выбирает выделенные (выбранные пользователем) элементы.
Структурные псевдо­классы Структурные псевдоклассы форматируют дочерние элементы в соответствии с указанным параметром в скобке, варианты: 

:nth-child(odd) – выбирает нечетные дочерние элементы. 
:nth-child(even) – выбирает четные дочерние элементы. 
:nth-child(3n) – выбирает каждый третий элемент среди дочерних. 
:nth-child(3n+2) – выбирает каждый третий элемент, начиная со второго дочернего элемента (+2). 
:nth-child(n+2) – выбирает все элементы, начиная со второго. 
:nth-child(3) – выбирает третий дочерний элемент. 
:nth-last-child() – в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с :nth-child(), но начиная с последнего, в обратную сторону. 
:first-child – позволяет оформить только самый первый дочерний элемент тега. 
:last-child – позволяет форматировать последний дочерний элемент тега. 
:only-child – выбирает элемент, являющийся единственным дочерним элементом. 
:empty – выбирает элементы, у которых нет дочерних элементов. 
:root – выбирает элемент, являющийся корневым в документе (элемент html).
Структурные псевдо­классы типа Позволяют указать на конкретный тип дочернего тега: 

:nth-of-type() – выбирает элементы по аналогии с :nth-child(), при этом берет во внимание только тип элемента. 
:first-of-type – позволяет выбрать первый дочерний элемент. 
:last-of-type – выбирает последний тег конкретного типа. 
:nth-last-of-type() – выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца. 
:only-of-type – выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.
Псевдо­элементы Псевдоэлементы используются для добавления содержимого, которое генерируется с помощью свойства content, и для изменения внешнего вида части элемента: 

:first-letter – выбирает первую букву каждого абзаца, применяется только к блочным элементам. 
:first-line – выбирает первую строку текста элемента, применяется только к блочным элементам. 
:before – вставляет генерируемое содержимое перед элементом. 
:after – добавляет генерируемое содержимое после элемента.
О нашем сайте
Проект созданный для всех веб-мастеров с интересными и удобными инструментами, материалами, стьями и еще с многой другой полезной информацией. Хостинг от uCoz