В CSS3 появилось свойство

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

Вычисление всегда выполняется по формуле:

1
Width = Margin + Border + Padding + Content
. То есть, если ширина контента задана в 200px,
1
padding
равен 25px,
1
border
равен 10px, а
1
margin
равен 15px; то результирующая ширина блока будет равна 300px.

Такой способ вычисления ширины блока делают все современные браузеры:

200px + 25px*2 + 10px*2 + 15px*2 = 300px

Модель расчета ширины блока в браузере по умолчанию

Однако, были времена, когда не все браузеры вычисляли размеры блока элемента подобным образом. Существовал Internet Explorer версии 5/6, который ширину блока считал несколько иначе: из заданной ширины блока вычитались padding и border, получалась результирующая ширина области content. В те времена веб-разработчики “показывали пальцем” на этот браузер и говорили, что это ошибка и недочет разработчиков IE5/6.

Но теперь времена изменились благодаря появлению адаптивного (

1
responsive
) дизайна. Причины возникновения адаптивного дизайна - в огромном количестве устройств с разными размерами экранов, по большей части мобильных. Задача адаптивного дизайна в “подстраивании” одного и того же дизайна сайта под различные размеры мониторов. При таком “подстраивании” важной становиться задача вычисления ширины блоков элементов, чтобы верстка не “разваливалась”.

Чтобы такого не произошло, как раз и становиться удобным “возврат” к той модели расчета ширины блока, какая присутствовала в IE5/6. Для этого было разработано свойство

1
box-sizing
, с помощью которого можно управлять подобной моделью расчета.

Свойство
1
box-sizing
принимает три значения (три модели вычисления ширины блока): **content-box
  padding-box   border-box**.

Свойство box-sizing: content-box

Первая модель

1
content-box
является способом вычисления ширины блока по умолчанию, принятым в современных браузерах:

box-sizing: content-box

Ширина блока равна сумме:

1
Width = Width (Content) + Padding + Border + Margin

Свойство box-sizing со значением content-box

Свойство box-sizing: padding-box

Вторая модель

1
padding-box
заключается в том, что ширина блока включает в себя ширину контента (
1
content
) и ширину
1
padding
. Остальные -
1
border-box
и
1
margin-box
- приплюсовываются к заданной ширине, как обычно. Данная модель, хоть и заявлена в спецификации CSS3, не поддерживается на сегодняшний день почти никакими браузерами; так что о ней можно забыть (пока забыть):

box-sizing: padding-box

Ширина блока равна сумме:

1
Width = Width (Content + Padding) + Border + Margin

Свойство box-sizing со значением padding-box

Свойство box-sizing: border-box

Третья модель

1
border-box
очень похожа на предыдущую модель
1
padding-box
. Но, в данном случае, ширина блока включает в себя еще и
1
border-box
; то есть ширина блока включает в себя область
1
content-box
,
1
padding-box
и
1
border-box
. Область
1
margin-box
прибавляется к ширине блока элемента, как обычно.

box-sizing: border-box

Ширина блока равна сумме:

1
Width = Width (Content + Padding + Border) + Margin

Свойство box-sizing со значением border-box

Практический пример свойства box-sizing

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

1
box-sizing
. Допустим, у нас имеется блок-обертка
1
div class="wrap"
, внутри которого расположены два плавающих блока-потомка
1
div class="left"
и
1
div class="right"
.

HTML-разметка представлена ниже:

<div class="wrap">
  <div class="left"></div>
  <div class="right"></div>
</div>

… и CSS-таблица, обычная для такого случая. Единственное “новое” правило в этом коде - это свойство

1
box-sizing
, указанное с вендорными префиксами. Обычно его можно не указывать, так как у браузеров по умолчанию свойство
1
box-sizing
установлено в значении
1
content-box
(как уже упоминалось ранее). Но в нашем случае понадобится явно указать это свойство. Для блоков-потомков здесь намерено мы не указываем (пока не указываем)
1
padding
,
1
border
и
1
margin
:

*{
  margin: 0;
  padding: 0;
}

html{
  background-color: #a7c5a8;
}

body {
  width: 80%;
  margin: 0 auto;
}

.wrap{
  width: 800px;
  height: 400px;
  margin: 50px auto;
  background-color: #778899;
  border: 3px solid #ff0000;
}

.left, .right{
  float: left;
  width: 400px;
  height: 400px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.left{
  background-color: #000;
}

.right{
  background-color: #fff;
}

Свойство box-sizing со значением content-box

Блоки-потомки четко вписываются в блок-родитель, так как у них нет

1
border
,
1
padding
и
1
margin
; ширина блоков-потомков точно равна половине ширине блока-родителя.

Теперь добавим для блоков-потомков

1
padding: 5px
:

.left, .right{
  float: left;
  width: 400px;
  height: 400px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 5px;
}

Картина будет заранее предсказуемая - один из блоков-потомков опуститься вниз из-за добавления

1
padding: 5px
к обоим блокам:

Свойство box-sizing со значением content-box и padding: 5px

Настало время применить свойство

1
box-sizing
со значением
1
border-box
. Браузер сразу же пересчитает ширину обоих блоков и картина, как по волшебству, изменится:

.left, .right{
  float: left;
  width: 400px;
  height: 400px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 5px;
}

Свойство box-sizing со значением border-box и padding: 5px

Даже если добавить к блокам-потомкам границу

1
border
, то картинка останется прежней:

.left{
  background-color: #000;
  border: 6px solid #0000ff;
}

.right{
  background-color: #fff;
  border: 6px solid #00ff00;
}

Свойство box-sizing со значением border-box и border: 6px

Но если прибавить к блокам

1
div class="left"
и
1
div class="right"
правило
1
margin
, то наша разметка снова “сломается”:

.left, .right{
  float: left;
  width: 400px;
  height: 400px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 5px;
  margin-left: 5px;
}

Это происходит потому, что в модель вычисления

1
border-box
поля
1
margin
не входят. Поле
1
margin-left
размером 5px прибавляется к ширине блока-потомка. Суммарная ширина обоих блоков-потомков превышает ширину блока-родителя и один из них выходит из его, опускаясь (снова) вниз:

Свойство box-sizing со значением border-box и margin-left: 5px

В этом примере мы не применили к свойству

1
box-sizing
значения
1
padding-box
, потому что [браузеры не понимают этого значения][1] и свойство
1
box-sizing
работать не будет в этом случае.

Заключение

Вот и все, что можно сказать о свойстве

1
box-sizing
. Понимание этого свойства понадобиться еще, когда придет время изучать адаптивный (responsive) дизайн.

Основой для данной статьи послужила замечательная “Большая книга CSS3 Д. Макфарланд (3-е издание).


[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing “MDN CSS - box-sizing”

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

Наиболее популярные сервисы такого рода это CodePen и jsFiddle. Лично мне больше нравиться jsFiddle, но у него есть один существенный для меня недостаток (точнее - их два на самом деле). В этом сервисе можно выполнить замену CSS на SCSS, но подключить библиотеку Compass - нельзя. И еще там нет автоматического обновления создаваемого проекта.

Другой сервис - CodePen является идеальным инструментом для веб-мастера или верстальщика. В нем есть все, что нужно и ничего лишнего. Может быть, это потому, что проект был создан хорошо известным Cris Coyier?

Данная статья, возможно, никогда не была бы написана, если не одна причина - я не знал, как в этом сервисе подключить поддержку SCSS + Compass. Решение лежало на поверхности, достаточно было “остановиться на бегу” - выделить немного времени на изучение этого проекта.

Ниже привожу подробное и красочное описание работы с CodePen в картинках. Точнее - это будет описание основных, самых основных или ключевых моментов при написании кода в CodePen.

Главная страница CodePen

Первое, что необходимо, это конечно же зайти на данный ресурс по адресу http://codepen.io. Тем, кто первый раз попал сюда, может зарябить в глазах, но это с непривычки:

Главная страница CodePen

Самое основное на главной странице - это окна с готовыми работами других веб-мастеров. То есть, люди работали в этом сервисе, написали и протестировали какой-то код; и этот код в готовом виде демонстрируется в различных окошках проекта CodePen. Выборка работ производится в случайном порядке, насколько я понимаю.

Внизу каждого “окошка” с готовой работой показаны метаданные - информация об авторе. К примеру, рассмотрим код, созданный автором по имени Yaroslav. Видим, что веб-мастер экспериментировал с созданием на CSS различных продвинутых типов

1
background
(насколько правильно я понял его работу чисто по внешнему виду, исходный код не смотрел). Комментариев к его работе никто не пожелал оставить, хотя ознакомилось с ним уже 129 человек и семерым из них он даже понравился.

При щелчке мыши на любом из заинтересовавших проектов (прямо в окошко) открывается его исходный код, с которым можно детально ознакомиться при желании.

Настройка CodePen - начало

В принципе, больше ничего нас в главном окне CodePen не интересует - ведь нам необходимо самим создавать “нетленные” работы! Для этого сначала нужно зарегистрироваться на CodePen, после чего получаем свой личный кабинет с настройками. Так как первоначально задача стояла в подключении SCSS + Compass в CodePen, то будет решать ее с первых шагов. В правом верхнем углу есть синий значок-аватар, по которому нужно щелкнуть мышью. Раскроется список, в котором необходимо выбрать строку “Your Settings”:

Доступ к личному профилю на CodePen

Все настройки CodePen уместились на одной странице и это замечательно! Окно разделено на четыре секции - Syntax Hightlighting, Fonts, Key Bindings, Preprocessor & Library Defaults. В принципе, здесь все интуитивно понятно:

Настройки CodePen

Секция Syntax Hightlighting служит для выбора цветовой схемы подсветки синтаксиса с предварительным просмотром. Можно выбрать одну из пяти, но первая (по умолчанию) самая лучшая.

Секция Fonts помогает выбрать шрифт и размер шрифта. Выбор шрифтов небольшой, но лучше оставить Monaco - он лучше всех смотрится. Размер шрифта можете выбрать, какой вам нравиться.

Секция Key Bindings совсем простенькая - здесь можно выбрать сочетание клавиш при работе в CodePen. Normal - это обычный набор сочетаний клавиш, а Vim для тех, кто привык и хорошо себя чувствует в линуксовом (весьма своеобразном) редакторе Vim.

Секция Preprocessor & Library Defaults самая большая и самая необходимая для нас, ведь ради нее мы и зашли в настройки. В этом разделе можно установить, какие препроцессоры для HTML, CSS и JavaScript будут использоваться в каждом новом проекте, создаваемом в CodePen. В строке HTML Preprocessor ничего не делаем, так как препроцессорами для HTML не пользуемся. В строке CSS Preprocessor выбираем из списка SCSS, а в следующей строке CSS Preprocessor Add-on выбираем библиотеку под SCSS - Compass (for Sass). Строка CSS Reset служит для выбора “CSS-ластика”: CSS Reset или Normalize. Можно также обратить внимание на строчку Prefix Free?, в которой есть возможность поставить галочку:

JavaScript библиотека Prefix Free

Prefix Free - это JavaScript, созданный для того, чтобы работать с браузерными префиксами на самом современном уровне. Другими словами, этот скрипт фильтрует созданный CSS-код на предмет наличия в нем браузерных (вендорных) префиксов и проверяет, какие из них нужно использовать на сегодняшний день, а от каких уже можно отказаться. Польза Prefix Free в очистке CSS-кода от лишнего мусора и увеличение скорости загрузки в браузере.

Но продолжим разбор секции Preprocessor & Library Defaults. Три последние строчки относятся к поддержке JavaScript в CodePen. В строке JS Preprocessor выбирается препроцессор JavaScript, в строке JS Library - подключаем библиотеку JavaScript, а в строчке Modernizr? отмечаем, нужна ли нам встроенная поддержка JavaScript-библиотеки Modernizr.

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

Вот и все, что можно или нужно сделать в настройках CodePen. Сохраняем изменения, нажав большую зеленую кнопку Save All Settings в нижнем правом углу окна.

Быстрая настройка CSS-препроцессоров в CodePen

Стоит также сказать, чтобы настройки, рассмотренные выше, можно внести в создаваемый проект “на лету”. Для этого нужно щелкнуть мышью на значке шестеренки в окне кода CSS. Появиться небольшое окошко с выбором одного из четырех CSS-препроцессоров: SASS, SCSS, LESS, Stylus. Также можно выбрать CSS-ластик: Normalize, Reset или вообще никакого (Neither). Включить библиотеку Prefix-Free; подключить внешнюю таблицу стилей CSS или же другой проект, указав в строке External CSS File or Another Pen абсолютный путь к этому файлу:

Окно быстрых настроек CSS в CodePen

Кнопка Analyze CSS via CSS Lint служит для проверки CSS-кода в CodePen на синтаксические ошибки с помощью известного проекта CSS Lint (под редактор Sublime Text также есть подобный плагин). На рисунке “Основное окно CodePen” внимательный читатель может заметить ошибки, на которые обязательно “заругается” CSS Lint. В частности,

1
font-size: 62,5%
)):

Выбираем CSS-препроцессор в CodePen

Основное окно CodePen

С настройками CodePen разобрались, теперь давайте вкратце рассмотрим основное окно в этом редакторе. Оно разбито на три части для написания кода на HTML, CSS и JavaScript. Внизу расположено окно предварительного просмотра. Не стоит даже упоминать, что можно легко изменить расположение и вид этих окон:

Основное окно CodePen

Вверху находятся четыре большие кнопки: Save, Fork, Info, Share. Кнопка Save - конечно же для сохранения проекта (Pen). Если имеются несохраненные изменения, то вверху этой кнопки появляется оранжевая полоска, как напоминание о необходимости сохранить изменения. Кстати, забыл упомянуть, что в CodePen проект называется Pen (</em>вот так незатейливо</em>). Кнопка Fork - для создания ответвления (fork) проекта. Кнопка Info - внести информацию о создаваемом Pen: его заголовок, описание и мета-теги:

Информация о проекте на CodePen

Кнопка Share весьма и весьма полезна. С помощью нее можно поделиться созданным проектом (кодом) с другими людьми. Собственно, именно для этой цели сервис CodePen и создавался. Там же можно скачать проект в виде zip-архива или выложить его на GitHub. И даже отправить ссылку в виде SMS на указанный номер телефона:

Публичная ссылка в CodePen

На CodePen можно встраивать один проект (Pen) в другой проект (Pen). Более того, созданный Pen можно встраивать в виде готового куска кода в другие проекты (не обязательно созданные в CodePen), в том числе и под CMS WordPress. Это уже совсем круто!

Встраивание CodePen в другой проект

Работаем с SCSS + Compass в CodePen

Настройку подключения SCSS + Compass в CodePen мы выполнили, осталось посмотреть, реально ли все работает. Да, действительно все нормально! Собственно, сам код SCSS внимательный читатель мог увидеть уже на рисунке “Основное окно CodePen”, когда говорилось о трех основных окнах CodePen. Там же можно было заметить, что рядом с надписью CSS появилась еще одна - (SCSS), что говорит о включенной поддержке SCSS.

На рисунке хорошо видны переменные SCSS и подключения mixin’ов из библиотеки Compass для создания радиуса скругления (

1
border-radius
), линейного градиента (
1
linear gradient
) и тени блока (
1
box-shadow
):

@include border-radius(...)
@include single-box-shadow(...)
@include background-image(...)

Двойной щелчок мыши на значке квадратика в правом верхнем углу окна CSS(SCSS) распахивает его на всю ширину окна браузера для большего удобства работы с кодом:

Распахиваем окно кода в CodePen

А щелчок мыши на самой надписи CSS переводит окно в режим компиляции, то есть перевода SCSS в готовый CSS-код:

Создание SCSS-кода в CodePen

Клавиатурные сокращения CodePen

В заключение можно упомянуть горячие клавиши для работы в CodePen. В принципе, ничего неожиданного в списке сочетания клавиш для CodePen нет, кроме, может быть, единственного - новый проект (Pen) создается с помощью Ctrl+P (а ожидался стандартный Ctrl+N). Также заметно, что сочетания клавиш обозначены под Mac OS X (это естественно - у автора проекта рабочий компьютер Mac). Но это не значит, эти горячие клавиши не будут работать и под Windows:

Список клавиатурных сокращений в CodePen

Заключение

На этом статья о сервисе CodePen завершена. Конечно, можно было бы упомянуть о добавлении проектов Pen в Коллекции, о кнопке удаления Pen. Но я оставлю это в качестве “домашнего задания” для тех, кому это нужно.


В CSS существует два типа псевдо-сущностей: псевдо-классы (

1
pseudo-class
) и псевдо-элементы (
1
pseudo-element
). В спецификации CSS2.1 имеются следующие псевдо-классы и псевдо-элементы (
1
pseudo-element
):

Псевдо-классы (
1
pseudo-class
):

  • 1
    
    :link
    - непосещенная ссылка (ни разу не щелкали мышью по ней)
  • 1
    
    :visited
    - посещенная ссылка (уже щелкнули мышью на ссылке)
  • 1
    
    :hover
    - наведенная ссылка (навели курсор мыши на ссылку)
  • 1
    
    :focus
    - элемент в фокусе (кнопка или поле ввода получили фокус при нажатии клавиши Tab)
  • 1
    
    :active
    - активный элемент (например, ссылка, на которой произведен щелчок мыши)
  • 1
    
    :first-child
    - элемент, являющийся первым ребенком своего элемента-родителя
  • 1
    
    :lang()
    - элемент, основанный на значении его аттрибута
    1
    
    lang

Псевдо-элементы (
1
pseudo-element
):

Псевдо-элементы, существующие в спецификации CSS2.1:

  • 1
    
    ::first-line
  • 1
    
    ::first-letter
  • 1
    
    ::before
  • 1
    
    ::after

Так в чем же разница между псевдо-классом (

1
pseudo-class
) и псевдо-элементом (
1
pseudo-element
)? Все различие заключается в способе, которым эти две псевдо-сущности осуществляют воздействие на HTML-документ.

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

1
pseudo-class
) ведут себя так, как если бы они добавлялись в виде обычных классов элементам HTML-страницы при выполнении определенных событий. Псевдо-элементы (
1
pseudo-element
) ведут себя так, как если бы они были обычными элементами HTML-страницы, но добавляемыми на нее при выполнении определенных событий.

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

1
pseudo-class
), а вторая в виде элемента (
1
pseudo-element
). Каким образом появляются? Только одним способом - браузер сам создает (генерирует) псевдо-сущность при выполнении указанного события. Поэтому псевдо-сущности иногда называют генерируемым содержимым. Название “псевдо” в точности говорит само за себя - “как-будто”. То есть - “как-будто класс”, “как-будто элемент”. Название дано не случайно - в исходном коде HTML-страницы не существуют таких классов или элементов; но они появляются (генерируются) там с помощью браузера при определенном событии.

Возьмем в качестве примера псевдо-элемент (

1
pseudo-element
)
1
::first-letter
. Предположим, необходимо сделать каждую первую букву заголовка
1
h1
вдвое большего размера, чем остальной текст в этом заголовке.

Легко:

h1::first-letter{
  font-size: 250%;
  color: #778899;
}

Псевдо-элемент ::first-letter

Такое впечатление, что внутри HTML-разметки и CSS-таблицы произошли следующие изменения:

HTML-разметка:

<h1>
  <first-letter>H</first-letter>owdy, y'all
</h1>

CSS-правило:

h1 first-letter{
  font-size: 250%;
}

Выглядит это так, словно в действительно все так (как создается впечатление) и происходит внутри браузера, не правда ли? Кто знает? Все, что вы знаете, что это работает так, как будто на самом деле так и выглядит. Имя всему этому “псевдо-элемент”.

Аналогично, псевдо-класс работает так, если обычный класс добавляется к элементам внутри HTML-документа.

Например, представим себе, что браузер добавляет класс

1
first-child
к каждому элементу
1
li
, который является первым ребенком своего родителя
1
ul
. Тогда эти элеиенты можно оформить в виде следующего CSS-правила:

li.first-child{
  border-left: none;
}

Простая замена точки на двоеточие (получается

1
li:first-child
) и мы имеем тот же самый конечный результат, без необходимости добавления вручную классов к элементам внутри всей HTML-разметки.

Вы могли уже догадаться относительно использования в псевдо-элементах двойного двоеточия. Такой синтаксис появился уже позже спецификации CSS2.1 (в спецификации CSS3).

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

CSS3 псевдо-классы (pseudo-class):

Спецификация CSS3 добавляет еще несколько псевдо-классов (

1
pseudo-class
), большинство из которых не имеет всеобщей поддержки в браузерах (на момент написания статьи):

  • 1
    
    :target
  • 1
    
    :root
  • 1
    
    :nth-child()
  • 1
    
    :nth-of-type()
  • 1
    
    :nth-last-of-type()
  • 1
    
    :first-of-type
  • 1
    
    :last-of-type
  • 1
    
    :only-of-type
  • 1
    
    :only-child
  • 1
    
    :last-child
  • 1
    
    :empty
  • 1
    
    :not()
  • 1
    
    :enabled
  • 1
    
    :disabled
  • 1
    
    :checked

Автор статьи: Eric Meyer - “Smashing CSS Professional Techniques for Modern Layout”

На этом все.


Псевдоэлементы
1
:first-of-type
и
1
:last-child

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

1
:first-of-type
служит для выборки дочернего элемента определенного типа.

Можно сказать, что псевдоэлемент

1
:first-of-type
является частным случаем псевдоэлемента
1
:first-child
. Если псевдоэлемент
1
:first-child
выполняет выборку первого дочернего элемента вне зависимости от его типа, то псевдоэлемент
1
:first-of-type
осуществляет выборку первого дочернего элемента только указанного типа (если этот элемент отвечает заданному условию - типу элемента).

Аналогично работает псевдоэлемент

1
:last-of-type
, только применяется к последнему дочернему элементу определенного типа. Более общим случаем является псевдоэлемент
1
:last-child
.

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

1
:last-child
,
1
:nth-child()
,
1
:first-of-type
НЕ ПОДДЕРЖИВАЮТСЯ IE8.

Пример:

.fofo p:first-of-type{}

… в примере тег

1
p
является указанием типа дочернего элемента. То есть, будет выбран первый дочерний элемент типа
1
p
, родителем которого является элемент с классом
1
.fofo
.

.wowo p:last-of-child{}

Выбрать последний дочерний элемент типа

1
p
, родителем которого является элемент с классом
1
.wowo
.

Рабочий пример приведен ниже. Два одинаковых списка. К первому применен псевдоэлемент

1
:first-of-type
, ко второму - псевдоэлемент
1
:first-child
.

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

1
p
:

.fofo p:first-of-type{
  font-weight: bold;
  color: #222;
  font-variant: small-caps;
  text-shadow: 1px 1px 1px #999;
}

Во втором случае к списку применен псевдоэлемент

1
:first-child
и в этом случае был отобран первый элемент указанного списка - ссылка
1
a
! А то, что этот элемент является ссылкой, а не параграфом
1
p
, роли не играет - тип элемента не был указан:

.wowo :first-child{
  font-size: 14px;
  font-style: italic;
  color: green;
  font-weight: bold;
}

Псевдоэлемент :first-of-type

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

1
:last-of-child
и его общий случай
1
:last-child
разбирать смысла нет, так как выборка элемента из HTML-документа осуществляется аналогично с тем лишь различием, что применяется не к первому, а последнему дочернему элементу.

Псевдоэлемент
1
:nth-of-type

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

1
:nth-of-type
является частным случаем псевдоэлемента
1
:nth-child
. В случае с
1
:nth-of-type
выборка элементов производится не только по порядковому номеру, но и по типу элемента.

Например,

1
p img:nth-of-type(odd){float: left}
и
1
p img:nth-of-type(even){float: right}
делает выборку четных и нечетных порядковых номеров только элементов
1
img
.

Отбираются все дочерние по отношению к

1
.nthOfType
элементы типа
1
img
, нечетные по порядковому номеру. И применяются к нему правила - смещение влево,
1
margin-right
и тень справа:

.nthOfType img:nth-of-type(odd){
  float: left;
  margin: 0 10px 0 0;
  box-shadow: 3px 3px 3px rgba(0,0,0,.65);
}

Отбираются все дочерние по отношению к

1
.nthOfType
элементы типа
1
img
, четные по порядковому номеру. И применяются к нему правила - смещение право,
1
margin-left
и тень слева:

.nthOfType img:nth-of-type(even){
  float: right;
  margin: 0 0 0 10px;
  box-shadow: -3px 3px 3px rgba(0,0,0,.65);
}

Псевдоэлемент :nth-of-type

Псевдокласс :not

Псевдокласс

1
:not
(псевдокласс отрицания) - выбрать все элементы
1
p
, у которых НЕТ класса
1
.classy
и применить к ним следующие свойства: цвет и тень. Другими словами, выборка элементов с помощью псевдокласса
1
:not
производится от обратного - “выбрать все элементы, которые НЕ ОТВЕЧАЮТ следующему условию.”

Этот псевдокласс является антагонистом обычного условия - “если удовлетворяет условию, то примени такое-то свойство”:

<p class="classy">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
</p>
.dodo p:not(.classy){
  color: blue;
  text-shadow: 1px 1px 1px rgba(0,0,255,.2);
}

Псевдоэлемент :not

На этом все.


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

1
nth-child()
полезен и удобен в применении.

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

С ключевыми словами все более или менее ясно и просто - их всего два, одно отвечает за счет четных чисел, другое - за счет нечетных чисел. Нумерация в списках начинается с 1, а не с нуля. Поэтому при выборке с помощью ключевого слова

1
odd
- выбираются все нечетные позиции (
1
1, 2, 3, 5, 7, ...
). С помощью ключевого слова
1
even
- выбираются четные позиции (
1
2, 4, 6, 8, ...
).

Например, так:

li:nth-child(odd) a{
  color: #778899;
  text-decoration: none;
}

или так:

li:nth-child(even) a{
  color: #778899;
  text-decoration: none;
}

Псевдо-элемент nth-child(even)

А вот с общей формулой примерного вида

1
2n+2
было несколько сложнее. Пока я в “Большой книге CSS3” не нашел простого и краткого объяснения, как “читать” это выражение.

Все просто на самом деле. Допустим, у нас есть такое выражение:

li:nth-child(2n+3){
  color: #778899;
  text-decoration: none;
}

… здесь мы говорим браузеру - применить цвет

1
#778899
и убрать подчеркивание
1
text-decoration: none;
к тексту каждого второго (
1
2n
) элемента
1
li
, начиная с третьего (
1
3
).

Еще примеры:

  • 1
    
    .third li:nth-child(3n+2)
    - выбрать каждый третий элемент, начиная со второго по порядку;
  • 1
    
    .fifth li:nth-child(5n+3)
    - выбрать каждый пятый элемент, начиная с третьего элемента;
  • 1
    
    .forth li:nth-child(4n+2)
    - выбрать каждый четвертый элемент, начиная со второго.

То есть, видя выражение типа

1
3n+4
, мы читаем его так: каждый третий элемент, начиная с четвертого. Вопрос остается открытым в отношении загадочной буквы
1
n
.

Как уже можно было догадаться, это всего лишь счетчик. Это объяснение выражения было “подсмотрено” мною на CSS-Tricks (How nth-child Works).

Буква

1
n
в этом выражении - счетчик, начинающийся с
1
0
. То есть, если взять первое выражение -
1
.third li:nth-child(3n+2)
, то вычисление внутри него будет производиться следующим образом:

3 * 0 + 2 = 2
3 * 1 + 2 = 5
3 * 2 + 2 = 8
3 * 3 + 2 = 11
3 * 4 + 2 = 14
3 * 5 + 2 = 17
3 * 6 + 2 = 20
...

То есть, как и говорилось выше - каждый третий элемент, начиная со второго. Совершенно ничего сложного, как видим. Простая математика и запоминать ничего не нужно. Главное - понять алгоритм вычисления в этом выражении.

Тогда ключевое слово

1
odd
можно записать в виде выражения
1
3n
, а ключевое слово
1
even
как выражение
1
2n
. Ключевые слова были введены в употребление для удобства ввиду частого использования выражений
1
2n
и
1
3n
.

На этом все.