Нонче тут

Сейчас 16 гостей онлайн

Поиск

Поиск от Nigma

2


Поиск от Яндекс

Счётчики

Яндекс.Метрика

Проверка тиц

ВКонтакте

Мы уже рассматривали селекторы и синтаксис css в первой части обзорной экскурсии по css, но с этого времени css вырос и стал совершеннее.

Содержание:

Селекторы

Селектор это часть CSS-правила, которая определяет элемент или элементы, к которым будет применён блок объявлений (стиль), содержащий форматирующие свойства.

Любой селектор может состоять более чем из одного простого селектора. К простым селекторам относятся:

  • селектор типа
  • универсальный селектор
  • селекторы атрибутов
  • селектор идентификатора
  • селектор класса
  • псевдо-классы
СелекторПримерОписаниеCSS
.class .myclass Выбор всех элементов с class="myclass". 1
#id #main Выбор элемента с id="main". 1
* * Выбор всех элементов. 2
элемент span Выбор всех элементов <span>. 1
элемент,элемент div,span Выбор всех элементов <div> и всех элементов <span>. 1
[атрибут] [title] Выбор элементов с атрибутом "title". 2
[атрибут=значение] [title=cost] Выбор всех элементов с title="cost". 2
[атрибут~=значение] [title~=cost] Выбор элементов с атрибутом title, содержащим слово cost. 2
[атрибут|=значение] [lang|=ru] Выбор всех элементов с атрибутом lang, значение которого начинается с "ru". 2
[атрибут^=значение] a[src^="https"] Выбор каждого элемента <a> с атрибутом src, значение которого начинается с "https". 3
[атрибут$=значение] a[src$=".png"] Выбор каждого элемента <a> с атрибутом src, значение которого заканчивается на ".png". 3
[атрибут*=значение] a[src*="estydiz"] Выбор каждого элемента <a> с атрибутом src, в значении которого есть "estydiz". 3

Комбинаторы

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

КомбинаторПримерОписаниеCSS
элемент элемент div span Выбор всех элементов <span> внутри <div>. 1
элемент>элемент div>span Выбор всех элементов <span>, у которых родитель <div>. 2
элемент+элемент div+p Выбор элемента <p>, который размещается сразу же после элементов <div>. 2
элемент1~элемент2 p~ol Выбор всех элементов <ol>, которым предшествует элемент <p>. 3

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

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

Псевдо-классПримерОписаниеCSS
:link a:link Выбор всех не посещенных ссылок. 1
:visited a:visited Выбор всех посещенных ссылок. 1
:active a:active Выбор активной ссылки. 1
:hover a:hover Выбор ссылки при наведении курсора мышки. 1
:focus input:focus Выбор элемента input, который находится в фокусе. 2
:first-child p:first-child Выбор каждого элемента <p>, который является первым дочерним элементом своего родителя. 2
:last-child p:last-child Выбор каждого элемента <p>, который является последним элементом своего родительского элемента. 3
:lang(язык) p:lang(ru) Выбор каждого элемента <p> с атрибутом lang, значение которого начинается с "ru". 2
:first-of-type p:first-of-type Выбор каждого элемента <p>, который является первым из элементов <p> своего родительского элемента. 3
:last-of-type p:last-of-type Выбор каждого элемента <p>, который является последним из элементов <p> своего родительского элемента. 3
:only-of-type p:only-of-type Выбор каждого элемента <p>, который является единственным элементом <p> своего родительского элемента. 3
:only-child p:only-child Выбор каждого элемента <p>, который является единственным дочерним элементом своего родительского элемента. 3
:nth-child(n) p:nth-child(2) Выбор каждого элемента <p>, который является вторым дочерним элементом своего родительского элемента. 3
:nth-last-child(n) p:nth-last-child(2) Выбор каждого элемента <p>, который является вторым дочерним элементом своего родительского элемента, считая от последнего дочернего элемента. 3
:nth-of-type(n) p:nth-of-type(2) Выбор каждого элемента <p>, который является вторым дочерним элементом <p> своего родительского элемента. 3
:nth-last-of-type(n) p:nth-last-of-type(2) Выбор каждого элемента <p>, который является вторым дочерним элементом <p> своего родительского элемента, считая от последнего дочернего элемента. 3
:root :root Выбор корневого элемента в документе. 3
:empty p:empty Выбор каждого элемента <p>, который не содержит дочерних элементов (включая текст). 3
:target :target Выбор активного элемента на странице, который имеет якорную ссылку. 3
:enabled input:enabled Выбор каждого включенного элемента <input>. 3
:disabled input:disabled Выбор каждого выключенного элемента <input>. 3
:checked input:checked Выбор элемента <input>, выбранного по умолчанию или пользователем. 3
:not(селектор) :not(p) Выбор всех элементов, кроме элемента <p>. 3

Псевдо-элементы

Псевдо-элементы - это виртуальные элементы, которые не существует в явном виде в дереве документа. Псевдо-элементы могут быть динамическими, поскольку виртуальные элементы могут изменяться, например, когда ширина окна браузера изменяется. Они также могут представлять содержимое, создаваемое с помощью правил CSS. Любые псевдо-элементы начинаются с двойного двоеточия :: /* CSS3 syntax */ или с одинарного : /* CSS2 syntax (only old browsers) */

Псевдо-элементПримерОписаниеCSS
::first-letter p::first-letter Выбор первой буквы каждого элемента <p>. 3
::first-line p::first-line Выбор первой строки каждого элемента <p>. 3
::before p::before Вставка содержимого перед каждым элементом <p>. 3
::after p::after Вставка содержимого после каждого элемента <p>. 3

Псевдо-элементПримерОписаниеCSS
:first-letter p:first-letter Выбор первой буквы каждого элемента <p>. 2
:first-line p:first-line Выбор первой строки каждого элемента <p>. 2
:before p:before Вставка содержимого перед каждым элементом <p>. 2
:after p:after Вставка содержимого после каждого элемента <p>. 2
Уважаемые гости сайта! Теперь Вы можете ознакомиться с новостями сайта в социальных сетях.
Новости сайта публикуются в Facebook, ВКонтакте, Blogspot и Мой мир и Twitter .
Что бы перейти к аккаунтам просто кликните на иконках социальных сетей.