1. *

* { margin: 0; padding: 0; }

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

Этот CSS-селектор выделяет каждый элемент на странице. Многие разработчики используют его для того, чтобы скинуть у всех элементов значения margin и padding. На первый взгляд это удобно, но все-таки в рабочем коде так лучше не делать. Этот CSS-селектор слишком сильно грузит броузер.

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

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

В данном случае выделятся все дочерние элементы #container. Опять же, старайтесь не злоупотреблять им.

2. #X

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

Знак решетки перед CSS-селектором Х выделит нам элемент с id = Х. Это очень просто, но будьте аккуратны при использовании id.

Спросите себя: мне абсолютно необходимо выделение по id?

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

3 .Х 

error { color: red; }

Это CSS-селектор класса Х. Разница между id и классом заключается в том, что одному классу может принадлежать несколько элементов на странице. Используйте классы, когда вы хотите применить стиль к нескольким однотипным элементам. При использовании id вам придется писать стиль для каждого отдельного элемента.

4. Х Y

li a { text-decoration: none; }

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

Не следует делать CSS-селекторы вида Х Y Z A B.error. Всегда спрашивайте себя, а обязательно ли для выделения данного элемента писать такой громоздкий CSS-селектор.

5. X

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

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

6. X:visited and X:link

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

7. Х+Y

ul + p { color: red; }

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

8. Х>Y

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

Разница между стандартными Х Y и X > Y состоит в том, что рассматриваемый CSS-селектор будет выбирать только непосредственные дочерние элементы. Например, рассмотрим следующий код.

<div id="container">
    <ul>
        <li> Элемент списка
            <ul>
                <li> Дочерний элемент</li>
            </ul>
        </li>
        <li> Элемент списка </li>
        <li> Элемент списка </li>
        <li> Элемент списка </li>
    </ul>
</div>

CSS-селектор #container > ul выберет только ul-ы, которые являются непосредственными дочерними элементами div с id =container . Он не выберет, например, ul-ы, являющиеся дочерними элементами первых li .

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

9. Х ~ Y

ul ~ p { color: red; }

Этот CSS-селектор очень похож на X + Y, однако, является менее строгим. При использовании ul + p будет выбрать только первый элемент, идущий за Х. В данном случае будут выбраны все элементы p, идущие за ul.

10. X[title]

a[title] { color: green; }

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

11. X [href="Foo"]

a[href="http://everstudent .ru"] { color: #ffde00; }

Все ссылки, которые ссылаются на everstudent.ru будут золотыми. Все остальные ссылки останутся неизменными неизменным.

Обратите внимание, что на кавычки. Не забудьте так же делать в jQuery и других JavaScript библиотеках, в которых элементы выбираются по CSS-селекторам. По возможности, всегда используйте CSS3 CSS-селекторы.

Хорошее правило, но слишком строгое. Что же делать, если ссылка ведет не непосредственно на everstudent.ru, а например на http://everstudent.ru/portfolio ? В этих случаях мы можем использовать регулярные выражения.

12. X [HREF *= "everstudent.ru"]

a[href*="everstudent"] { color: # 1f6053; }

Вот то, что нам нужно. Звезда обозначает, что искомое значение должно появляться где-нибудь в атрибуте. Таким образом, CSS-селектор охватывает everstudent.ru, http://everstudent.ru/portfolio и т.д.

Но что делать, если ссылка ведет на какой-то сторонних и не связанный ресурс, в адресе которого присутствует everstudent? Тогда нужно использовать "^"или "&", для ссылки на начало и конец строки соответственно.

13. X[href^="http"]

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

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

"^" - наиболее часто используемый в регулярных выражениях символ. Он используется для обозначения начала строки. Если мы хотим охватить все тэги, у которых href начинается с http, нам надо использовать CSS-селектор, приведенных выше.

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

А если мы хотим задать стиль только для ссылок, ведущих на фотографию? Нужно искатьконец строки.

14. X [href$=". JPG"]

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

Опять же, мы используем символ регулярного выражения "$" для обозначения конца строки. В данном мы ищем ссылки, которые ссылаются на jpg-файлы, или url-ы, в конце у которых стоит ".jpg".

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

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

Как же нам теперь написать CSS-селектор, который бы выделял ссылки на все виды изображений? Например, мы могли бы написать так:

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>

Теперь мы можем выделить такие ссылки при помощи данного CSS-селектора:

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

16. X[foo~="bar"]

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

А вот кое-что особенное. Не все знают об этом CSS-селекторе. Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой.

Например, мы можем задать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так, мы можем указать, что ссылка является внешней и что она ссылается на изображение.

<a href="path/to/image.jpg" data-info="external image"> Click Me </a>

Вот, Html-код на месте, теперь напишем стили.

/ * Выбираем ссылки с атрибутом data-info, содержащий значение "external" * /
a[data-info~="external"] { color: red; }
/ * И которые содержат значения "image" * /
a[data-info~="image"] { border: 1px solid black; }

Неплохо, да?

17. X:checked

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

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

18. X:after

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

Многие познакомились с этими псевдоклассами при работе с clear-fix hack.

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

Этот хак использует :after чтобы добавить пробел после элемента, и запретить его обтекание.

Согласно спецификации CSS3, вы должны использовать два двоеточия (::). Однако, можно использовать и одно двоеточие для совместимости.

19. X:hover

div:hover { background: #e3e3e3; }

Хотите применить стиль к элементу, когда наводите на него мышкой? Тогда этот CSS-селектор для вас.

Имейте в виду, что старые версии Internet Explorer применяют :hover только к ссылкам.

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

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

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

20. X:not(selector)

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

Или, если бы я хотел выбрать все элементы, за исключением p.

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

21. X::псевдо элемент 

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;
}

Аналогичным образом благодаря ::first-line мы задаем стиль первой строки в абзаце.

"Для совместимости с существующими таблицами стилей, браузер должен понимать прежнее обозначения псевдо элементов с одним двоеточием, введенные в CSS 1, 2 (:first-line, :first-letter, :before and :after). Эта совместимость не допускается для новых псевдо-элементов, введенных в этой спецификации" Источник

22. X:nth-child(n)

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

Раньше мы не могли выделить, например, третий дочерний элемент? nth-child решает это!

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

Мы даже можем выбрать каждый четвертый элемент списка, просто написав {0}li:nth-child(4n){/0}.

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

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

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

Этот метод почти идентичен приведенному выше, однако отсчет ведется с конца.

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

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

Бывает, что надо выбрать не дочерний элемент, а элемент определенного типа.

Представьте себе, что на странице пять неупорядоченных списков. . Если вы хотите применить стиль только к третьему ul, не имеющему уникального id, нужно использовать nth-of-type.

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

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

Мы можем также использовать nth-last-of-type, отсчитывая элементы с конца.

26. X:first-child

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

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

27. X:last-child

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

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

28. X:only-child

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

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

Он позволяет вам выбрать элементы, которые являются единственными дочерними. Например, применим приведенный выше стиль к этому html-коду:

<div>
    <p> Один параграф.</p>
</div>
<div>
    <p> Два параграфа </p>
    <p> Два параграфа </p>
</div>

29. X:only-of-type

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

Очень интересный псевдокласс. Он затрагивает элементы, не имеющие соседей в пределах родительского элемента. В качестве примера выберем ul только с одним элементом в списке.

Единственное решение заключается в использовании only-of-type .

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

30. X:first-of-type

first-of-type выбирает первый элемент заданного типа.

<div>  
    <p> Параграф </p>  
    <ul>     
        <li> Пункт 1 </li>     
        <li> Пункт 2 </li>  
    </ul>  
    <ul>     
        <li> Пункт 3 </li>     
        <li> Пункт 4 </li>  
    </ul>
<div>

Решение 1

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

Решение 2

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

Решение 3

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

@-webkit-keyframes <имя анимации> {
    <селектор кадра 1> {
        <свойство 1>:<значение 1>;
        <свойство 2>:<значение 1>;
    }
    <селектор кадра 2> {
        <свойство 1>:<значение 2>;
        <свойство 2>:<значение 2>;
    }
    .....................
    <селектор кадра n> {
        <свойство 1>:<значение n>;
        <свойство 2>:<значение n>;
    }   
}

• <имя анимации> — задает имя анимации в виде строки в одинарных кавычках (это имя потом используется при вызове анимации в качестве значения свойства -webkit-animation-name)
• <селектор кадра> — задает селекторы которые определяют ключевые кадры. Они могут принимать значения:
• from — внутри этого селектора описывается значения анимированных свойств в начальный момент анимации (также можно описать начальный кадр анимации, используя эквивалентный селектор 0%)
• to — внутри этого селектора описывается значения анимированных свойств в конечный момент анимации (также можно описать конечный кадр анимации, используя эквивалентный селектор 100%)
• <процент> — описывает значения анимированных свойств в данный момент времени (момент времени отсчитывается в процентном отношении от значения свойства -webkit-animation-duration)
• <свойство> — анимируемое CSS свойство
• <значение> — значения анимированного свойств в момент, описываемый селектором кадра

Пример кода

div {
        top:50px;
        left:0px;
        -webkit-animation-name:'movement';
        -webkit-animation-duration:10s;
}
@-webkit-keyframes 'movement' {
    from {
        top:50px;
        left:0px;
    }
    50% {
        top:150px;
        left:100px;
    }
    to {
        top:400px;
        left:300px;
    }   
}

.grid { 
   display: grid; 
   grid-template-columns: 200px 200px 200px; // задаём количество и ширину столбцов в px
   grid-template-columns: 1fr 1fr 1fr;  // задаём количество и ширину столбцов в fr
   grid-column-gap: 10px;  // задаём интервалы между столбцами
   grid-template-rows: 50px 1fr 30px;  // задаём количество и размеры строк
   grid-row-gap: 1em;  // задаём интервалы между строками
   grid-gap: 3%;  // задаём интервалы между строками и столбцами
}

Что такое Grid?

Фиксированные и гибкие размеры полос

Расположение элемента

Создание дополнительных полос для хранения контента

Управление выравниванием

Управление перекрывающимся контентом

Grid контейнер

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
 <div>Three</div>
   <div>Four</div>
 <div>Five</div>
</div>

Сделаем wrapper grid контейнером

.wrapper {
  display: grid;
}

Все прямые потомки теперь являются grid элементами. В веб-браузере вы не увидите никакой разницы в отображении элементов, поскольку Grid создал единую сетку столбцов для элементов. На данный момент вам может оказаться удобным работать в Firefox Developer Edition, в котором есть Grid Inspector, доступный как часть инструментов разработчика. Если вы просмотрите этот пример в Firefox и проверите Grid, вы увидите маленький значок рядом с display: grid. Нажмите этот значок, и сетка на этом элементе будет наложена в окне браузера.

По мере вашего обучения и последующей работы с CSS Grid Layout этот инструмент даст вам лучшее визуальное представление о том, что происходит с вашей сеткой.

Если мы хотим, чтобы это стало более похожим на сетку, нам нужно добавить полосы.

Grid Tracks

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div> 

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Единица измерения fr

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div> 

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

.wrapper {
  display: grid;
  grid-template-columns: 500px 1fr 2fr;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

```
.wrapper {
  display: grid;
  grid-template-columns: 20px repeat(6, 1fr) 20px;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr 2fr);
}

Явный и неявный грид

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

 .wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}

Масштабирование треков и minmax()

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
} 

<div class="wrapper">
   <div>One</div>
   <div>Two
   <p>I have some more content in.</p>
   <p>This makes me taller than 100 pixels.</p>
</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

Grid-линии

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

Линии нумеруются в соответствии с режимом написания (writing mode) документа. В языках с написанием слева-направо, линия 1 - самая левая линия в гриде. В языках с написанием справа-налево, линия 1 - самая правая линия в гриде. Линиям также можно давать имена, и - не переключайтесь, дальше мы узнаем, как это делать. 

Размещение элементов по линиям

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

В следующем примере мы размещаем первые два элемента в нашем гриде из трёх колоночных треков с помощью свойств grid-column-start(en-US), grid-column-end(en-US), grid-row-startи grid-row-end(en-US). Поскольку режим написания слева направо, первый элемент размещается, начиная с колоночной линии 1, и занимает пространство до колоночной линии 4, которая в нашем случае - самая правая линия грида. Наш элемент начинается со строчной линии 1 и заканчивается на строчной линии 3, таким образом занимая два строчных трека.

Второй элемент начинается с колоночной линии 1 и занимает один трек. Это поведение по умолчанию, поэтому не нужно задавать конечную линию. Элемент также занимает два строчных трека - со строчной линии 3 до строчной линии 5. Остальные элементы самостоятельно размещаются в пустых пространствах грида. 

<div class="wrapper">
   <div class="box1">One</div>
   <div class="box2">Two</div>
   <div class="box3">Three</div>
   <div class="box4">Four</div>
   <div class="box5">Five</div>
</div>

 .wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px;
}
.box1 {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}
.box2 {
    grid-column-start: 1;
    grid-row-start: 3;
    grid-row-end: 5;
}

Grid-ячейки

Grid-области

grid-template-areas

/* Keyword value */
grid-template-areas: none; /* <string> values */
grid-template-areas: "a b";
grid-template-areas:
  "a b b"
  "a c d"; /* Global values */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: revert;
grid-template-areas: revert-layer;
grid-template-areas: unset;
```

Пример

<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</section>
```

CSS

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav  main"
    "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}
#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}
#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}
#page > main {
  grid-area: main;
  background-color: #ffff64;
}
#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}
```

Зазоры (Gutters)

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-column-gap: 10px;
   grid-row-gap: 1em;
} 

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

Вложенные гриды

<div class="wrapper">
   <div class="box box1">
       <div class="nested">a</div>
       <div class="nested">b</div>
       <div class="nested">c</div>
    </div>
    <div class="box box2">Two</div>
    <div class="box box3">Three</div>
    <div class="box box4">Four</div>
    <div class="box box5">Five</div>
</div>

.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
}

Подгрид (Subgrid)

.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
   display: grid;
   grid-template-columns: subgrid;
}

Размещение элементов с помощью z-index

<div class="wrapper">
   <div class="box box1">One</div>
   <div class="box box2">Two</div>
   <div class="box box3">Three</div>
   <div class="box box4">Four</div>
   <div class="box box5">Five</div>
</div> Copy to Clipboard
```
.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
}
.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
}
.box2 {
   grid-column-start: 1;
   grid-row-start: 2;
   grid-row-end: 4;
}

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
}
.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
   z-index: 2;
}
.box2 {
   grid-column-start: 1;
   grid-row-start: 2;
   grid-row-end: 4;
   z-index: 1;
}

Модель визуального форматирования CSS описывает систему координат внутри каждого позиционированного элемента. Система координат является точкой отсчета для свойств смещения. Положение и размеры в этом координатном пространстве можно рассматривать как заданные в пикселях, относительно точки отсчета, с положительными значениями, идущими вправо и вниз. Это координатное пространство можно изменить с помощью свойства transform.

CSS3-трансформации позволяют сдвигать, поворачивать и масштабировать элементы. Трансформации преобразовывают элемент, не затрагивая остальные элементы веб-страницы, т.е. другие элементы не сдвигаются относительно него.

В HTML трансформируемый элемент это: элемент с display: block; и display: inline-block;, а также элементы, значение свойства displayкоторых вычисляется как table-row, table-row-group, table-header-group, table-footer-group, table-cell или table-caption.

Трансформированным считается элемент с любым установленным значением свойства transform, отличным от none.

В SVG трансформируемый элемент — это элемент, который имеет атрибуты transform, patternTransform или gradientTransform.

Существуют два вида CSS3-трансформаций – 2Dи 3D. 2D-трансформации преобразовывают элементы в двумерном пространстве c помощью 2D-матрицы преобразований. Эта матрица применяется для вычисления новых координат объекта, на основе значений свойств transformи transform-origin. Преобразования влияют только на визуальный рендеринг. В отношении макета страницы они могут отразиться на переполнении содержимого блока. По умолчанию точка трансформации находится в центре элемента.

2D-трансформации элементов

1. Функции 2D-трансформации: свойство transform

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

Свойство не наследуется.

Допустимые значения:

matrix()— любое число
translate(), translateX(), translateY()— единицы длины (положительные и отрицательные), %
scale(), scaleX(), scaleY()— любое число
rotate()— угол (deg, grad, radили turn)
skew(), skewX(), skewY()— угол (deg, grad, rad)

Можно объединить несколько трансформаций одного элемента, перечислив их через пробел в порядке проявления.

Синтаксис

transform: none;
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: rotate(45deg);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: inherit;
transform: initial;

2. Точка трансформации: свойство transform-origin

Свойство transform-origin позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. Значение по умолчанию — center, или 50% 50%. Задаётся только для трансформированных элементов.

Свойство не наследуется.

transform-origin

Значения:

ось Х(left, center, right, длина, %)

ось Y(top, center, bottom, длина, %)

Пара значений, заданная с помощью ключевых слов, единиц длины или процентов определяет, относительно какой части элемента будет происходить трансформация. Значения больше 100% увеличивают область трансформации элемента.

initial

Устанавливает значение свойства в значение по умолчанию.

inherit

Наследует значение свойства от родительского элемента.

Синтаксис

transform-origin: 2px;
transform-origin: bottom;
transform-origin: 3cm 2px;
transform-origin: left 2px;
transform-origin: right top;
transform-origin: inherit;
transform-origin: initial;

3. Область преобразования: свойство transform-box

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

В некоторых браузерах опорный блок принимает центр SVG-холста в качестве точки преобразования. Чтобы решить эту проблему, можно задать для элемента transform-box.

Опорный блок добавляет дополнительное смещение к исходной точке, заданной свойством transform-origin.

Свойство не наследуется.

transform-box

Значения:

content-box

В качестве опорного блока выступает область содержимого элемента. Для элемента <table>эта область включает также заголовок таблицы и рамку.

border-box

В качестве опорного блока выступает область рамки элемента. Для элемента <table>эта область включает также заголовок таблицы и рамку.

fill-box

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

stroke-box

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

view-box

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

initial

Устанавливает значение свойства в значение по умолчанию.

inherit

Наследует значение свойства от родительского элемента.

Синтаксис

transform-box: content-box;
transform-box: border-box;
transform-box: fill-box;
transform-box: stroke-box;
transform-box: view-box;
transform-box: inherit;
transform-box: initial;

1 Шаг изменения

<input type="number" step="1" placeholder="step = 1"> <input type="number" step="10" placeholder="step = 10"> <input type="number" step="0.1" placeholder="step = 0.1">

2 Минимальное значение

<input type="number" step="10" min="0" placeholder="min = 0"> <input type="number" step="10" min="-100" placeholder="min = -100"> <input type="number" step="0.1"min="-0.1" placeholder="min = -0.1">

3 Максимальное значение

<input type="number" step="1" max="10" placeholder="max = 10"> <input type="number" step="10" max="100" placeholder="max = 100"> <input type="number" step="0.1" max="1.5" placeholder="max = 1.5">

4 Опции по умолчанию

<input type="number" list="input-list"> <datalist id="input-list"> <option value="111"> <option value="222"> <option value="333"> <option value="444"> <option value="555"> </datalist>

5 Валидация

<form> <input type="number" step="10" min="0" max="100" required> <input type="submit" value="Отправить"> </form>

Также доступны CSS псевдо свойства :invalid и :valid, с помощью них можно применить стили к неправильно заполненному полю.

<form> <div class="row"> <input type="number" step="10" min="0" max="100" required> <span></span> </div> <div class="row"> <input type="number" step="10" min="0" max="100" required> <span></span> </div> </form>

HTML

input[type="number"]:invalid+span:after { content: '✖'; padding-left: 5px; color: red; } input[type="number"]:valid+span:after { content: '✓'; padding-left: 5px; color: green; }

6 Стилизация

input[type="number"] { background-color: #eee; vertical-align: top; outline: none; padding: 0; height: 40px; line-height: 40px; text-indent: 10px; display: inline-block; width: 100%; box-sizing: border-box; border: 1px solid #ddd; font-size: 14px; border-radius: 3px; } input[type="number"]:focus { outline: 2px solid blue; }

7 Убрать стрелки

input[type="number"] { -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { display: none; }

8 Как стилизовать стрелки

HTML

<div class="number"> <button class="number-minus" type="button" onclick="this.nextElementSibling.stepDown(); this.nextElementSibling.onchange();">-</button> <input type="number" min="0" value="1" readonly> <button class="number-plus" type="button" onclick="this.previousElementSibling.stepUp(); this.previousElementSibling.onchange();">+</button> </div>

CSS

.number { display: inline-block; position: relative; width: 100px; }
.number input[type="number"] { display: block; height: 32px; line-height: 32px; width: 100%; padding: 0; margin: 0; box-sizing: border-box; text-align: center; -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; }
.number input[type="number"]::-webkit-outer-spin-button, .number input[type="number"]::-webkit-inner-spin-button { display: none; }
.number-minus { position: absolute; top: 1px; left: 1px; bottom: 1px; width: 20px; padding: 0; display: block; text-align: center; border: none; border-right: 1px solid #ddd; font-size: 16px; font-weight: 600; }
.number-plus { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 20px; padding: 0; display: block; text-align: center; border: none; border-left: 1px solid #ddd; font-size: 16px; font-weight: 600; }

Pixel Glass — маленькая библиотека на JavaScript, которая поможет вам проверить насколько разметка страницы соответствует макету, без необходимости запускать графический редактор или уходить со страницы всякий раз, когда вам нужно свериться с макетом.

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

Как это работает?

Pixel Glass просто управляет прозрачностью элемента <body> . Когда <body> становится полупрозрачным, через него становятся видны макеты, заданные фоном для <html>.

Как использовать Pixel Glass в своём проекте?

1. Установите пакет в папку с проектом через npm:

npm i pixel-glass --save-dev

2. Поместите макеты страниц в ваш проект в папку image (или в другую, какая вам нравится).

3. Добавьте этот код на вашу страницу в элемент <head>

<!-- Pixel Glass -->
<style>
  HTML {
    background-repeat: no-repeat;
    background-position:  50% 0;
    /* По умолчанию показывается мобильный макет */
    background-image: url( "img/320.png" );
  }
  /* Планшет */
  @media ( min-width: 760px ) {
    HTML {
      /* Планшетный макет */
      background-image: url( "img/760.png" );
    }
  }
  /* Десктоп */
  @media ( min-width: 960px ) {
    HTML {
      /* Десктопный макет */
      background-image: url( "img/960.png" );
    }
  }
</style>
<link href="../node_modules/pixel-glass/styles.css" rel="stylesheet">
<script src="../node_modules/pixel-glass/script.js"></script>
<!-- // Pixel Glass -->

Отредактируйте код под ваш проект: настройте медиавыражения, поменяйте адреса картинок на рабочие.

4. Сохраните файл, обновите страницу и пользуйтесь!

Атрибут checked="checked"

Делает чекбокс [type="checkbox"] или радиокнопку [type="radio"] активной. Активных чекбоксов может быть несколько. В группе с одним name должна быть активной только одна радиокнопка.

<input type="checkbox" checked/> <input type="checkbox" checked/> <input type="checkbox"/>
  
<input type="radio" checked name="raz"/> <input type="radio" name="raz"/> <input type="radio" name="raz"/>

Атрибут checked="checked" можно вызывать с помощью label
Если нажать на содержимое label, то сработает input (будет активным или нет).

описание

<label><input type="checkbox"/> описание</label>

описание1  описание2

<label><input type="radio" checked name="dva"/> описание1</label> <label><input type="radio" name="dva"/> описание2</label>

input не обязательно должен располагаться внутри label.

описание

<input type="checkbox" id="raz"/><label for="raz">описание</label>

описание1 описание2

<input type="radio" checked name="dva" id="dva1"/><label for="dva1">описание1</label> <input type="radio" name="dva" id="dva2"/><label for="dva2">описание2</label>

Атрибут checked="checked" можно вызывать с помощью нескольких label
Кнопка будет срабатывать вне зависимости от того, на какой label я нажму и вне зависимости от расстояния между тегами label и input.описание2описание1

<label for="tri">описание2</label><input type="checkbox" id="tri"/><label for="tri">описание1</label>

 описание11 описание21 описание12 описание22

<input type="radio" checked="checked" name="tri" id="tri1"/><input type="radio" name="tri" id="tri2"/>
<label for="tri1">описание11</label> <label for="tri2">описание21</label> <label for="tri1">описание12</label> <label for="tri2">описание22</label>

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

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

<style>
.Green {
background: green;
width: 130px;
height: 130px;
transition: .5s;
}
#chetyre:checked ~ .Green {
background: yellow;
}
</style>

<input type="checkbox" id="chetyre"/>
<div class="Green"></div>
  
<style>
.Green1 {
background: green;
width: 130px;
height: 130px;
transition: .5s;
}
#chetyre2:checked ~ .Green1 {
background: yellow;
}
#chetyre3:checked ~ .Green1 {
background: red;
}
</style>

<input type="radio" checked="checked" name="chetyre"/> <input type="radio" name="chetyre" id="chetyre2"/> <input type="radio" name="chetyre" id="chetyre3"/>
<div class="Green1"></div>

<style>
#link {
position: relative;
}
#link a {
pointer-events: none;
}
#link:hover:before {
display: block;
content: "Подтвердите своё согласие с условиями договора";
position: absolute;
top: 0; left: 50%;
transform: translate(-50%, calc(-100% - 10px));
border-radius: 3px;
padding: 10px;
background: #f7f7f7;
box-shadow: 0 0 2px;
}
#link:hover:after {
display: block;
content: "";
position: absolute;
top: 0; left: 50%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 10px;
border-color: #f7f7f7 transparent transparent transparent;
}
#linkDa:checked ~ #link a {
pointer-events: auto;
}
#linkDa:checked ~ #link:after, #linkDa:checked ~ #link:before {
content: none;
}
</style>
<input type="checkbox" id="linkDa"/><label for="linkDa">Я ознакомлен и принимаю условия договора</label><br>
<span id="link"><a href="#">ссылка</a></span>

:checked и селекторы в Google Chrome

Не работает

<style>
#vosem:checked + label button {
color: red;
}
</style>


<input type="checkbox" id="vosem"/><label for="vosem"><button>описание</button></label>

Работает

<style>
#sem + label {
position: relative;
z-index: 1;
}
#sem + label button {
position: relative;
z-index: -1;
}
#sem:checked + label button {
color: green;
}
</style>


<input type="checkbox" id="sem"/><label for="sem"><button>описание</button></label>

Красивые чекбоксы-переключатели «ВЫКЛ ВКЛ». Как задать свой стиль checkbox
Я предпочитаю стандартный вид input, но к этому, этому и этому не осталась равнодушна и приложила свою руку к оформлению и стилизации checkbox. Можно убирать саму кнопку и задать свой стиль :before у label.

ON Проверка чекбокса на включение/отключение
Большинство вещей не решить только CSS. Нужно подключать JavaScript. 

<input type="checkbox" id="shest0">


<script>
var c = document.querySelector('#shest0');
c.onclick = function() {
if (c.checked) {
alert( 'чекбокс включён' );
} else {
alert( 'чекбокс выключён' );
}
}
</script>

Иногда нужно так 

<input type="checkbox" id="shest001">


<script>
var c = document.querySelector('#shest001');
c.onclick = function() {
alert( 'чекбокс выключён' );
if (c.checked) {
alert( 'чекбокс включён' );
}
}
</script>

Если группа 

<input type="checkbox" name="shest01">
<input type="checkbox" name="shest01">


<script>
var gr = document.getElementsByName('shest01');
window.onclick = function() {
for(var i=0; i<gr.length; i++)
if (gr[i].checked) {
alert( 'чекбокс включён' );
} else {
alert( 'чекбокс отключён' );
}
}
</script>

Или так 

<input type="checkbox" name="shest02">
<input type="checkbox" name="shest02">


<script>
var matches; // matchesSelector на момент написания статьи поддерживается только с префиксами
(function(doc) {
matches =
doc.matchesSelector ||
doc.webkitMatchesSelector ||
doc.mozMatchesSelector ||
doc.oMatchesSelector ||
doc.msMatchesSelector;
})(document.documentElement);


document.addEventListener('click', function(e) {
if ( matches.call( e.target, '[name="shest02"]:checked' ) ) {
alert( 'чекбокс включён' );
}
}, false);
</script>

Или так  . alert появляется по нарастающей. Если одна галочка, то одно сообщение, если три галочки, то три сообщения.

<input type="checkbox" name="shest03" onclick="klik();">
<input type="checkbox" name="shest03" onclick="klik();">
<input type="checkbox" name="shest03" onclick="klik();">


<script>
function klik() {
var c = [].filter.call(document.querySelectorAll('[name="shest03"]'), function(e) {return e.checked == true;});
c.forEach(function(eC) {
alert('чекбокс включён');
});
}
</script>

Проверить все ли чекбоксы помечены

<input type="checkbox" onclick="klik1();" name="shest04">
<input type="checkbox" onclick="klik1();" name="shest04">
<input type="checkbox" onclick="klik1();" name="shest04">


<script>
var vse = document.getElementsByName('shest04');


function klik1() {
if (Array.prototype.every.call(vse, function(e) {return e.checked == true;})) {
alert( 'все чекбоксы включёны' );
} else {
alert( 'нажмите все флажки' );
}
}
</script>

Второй вариант можно увидеть в примере ниже.
Установить checked в checkbox

<input type="checkbox" id="shest10">

<script>
function RAZ911() {
var c = document.querySelector('#shest10');
if (!c.checked) c.checked = true; // поставить checked, если он не установлен
}
RAZ911();
</script>

Установить checked в radio

<input type="radio" name="shest10"> <input type="radio" name="shest10">

<script>
function RAZ911() {
var c = document.getElementsByName('shest10');
if (!c[1].checked) c[1].checked = true; // поставить checked на второй input, если он не установлен
}
RAZ911();
</script>

Выделить все checkbox одним нажатием кнопки
Задача:
если отметить все checkbox, то будет отмечен и главный,
если снять checked хотя бы с одного checkbox группы, то будет снят checked и с общего чекбокса,
если будет поставлена/убрана галочка с основного чекбокса, то автоматом будут убраны/установлены все флажки второстепенных checkbox.
Check all  

<fieldset id="shest">
<legend><input type="checkbox"> Check all</legend>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</fieldset>


<script>
var main = document.querySelector('#shest legend [type="checkbox"]'),
all = document.querySelectorAll('#shest > [type="checkbox"]');


for(var i=0; i<all.length; i++) { // 1 и 2 пункт задачи
all[i].onclick = function() {
var allChecked = document.querySelectorAll('#shest > [type="checkbox"]:checked').length;
main.checked = allChecked == all.length;
main.indeterminate = allChecked > 0 && allChecked < all.length;
}
}


main.onclick = function() { // 3
for(var i=0; i<all.length; i++) {
all[i].checked = this.checked;
}
}
</script>

Ограничить область действия функции JavaScript. Функция исполняется только внутри конкретного тега
Если нужно несколько fieldset, то узнаём его порядковый номер при наведении на него курсора мышки и исполняем функции, если он имеет класс shest1.
Первая форма: Check all   Check all  Вторая форма: Check all   Check all  
Первая форма:

<form>
<fieldset class="shest1">
<legend><input type="checkbox"> Check all</legend>
<label><input type="checkbox"></label>
<label><input type="checkbox"></label>
<label><input type="checkbox"></label>
</fieldset>
<fieldset class="shest1">
<legend><input type="checkbox"> Check all</legend>
<label><input type="checkbox"></label>
<label><input type="checkbox"></label>
<label><input type="checkbox"></label>
</fieldset>
</form>
Вторая форма:
<form>
<fieldset class="shest1">
<legend><input type="checkbox"> Check all</legend>
<label><input type="checkbox"></label>
<label><input type="checkbox"></label>
<label><input type="checkbox"></label>
</fieldset>
<fieldset class="shest1">
<legend><input type="checkbox"> Check all</legend>
<label><input type="checkbox"></label>
<label><input type="checkbox"></label>
<label><input type="checkbox"></label>
</fieldset>
</form>


<script>
for (var u = document.getElementsByTagName("form"), i = 0; i < u.length; i++)
u[i].onmouseover = function (b) {
l = u[i].getElementsByTagName("fieldset");
for (var k = 0; k < l.length; k++)
if (l[k].className == "shest1") l[k].onmouseover = function (a) {
var main1 = document.querySelector('form:nth-of-type('+(b+1)+') fieldset:nth-of-type('+(a+1)+') legend [type="checkbox"]'),
all1 = document.querySelectorAll('form:nth-of-type('+(b+1)+') fieldset:nth-of-type('+(a+1)+') label [type="checkbox"]');
for(var j=0; j<all1.length; j++)
all1[j].onclick = function() {
var allChecked1 = document.querySelectorAll('form:nth-of-type('+(b+1)+') fieldset:nth-of-type('+(a+1)+') label [type="checkbox"]:checked').length;
main1.checked = allChecked1 == all1.length;
main1.indeterminate = allChecked1 > 0 && allChecked1 < all1.length;
}
main1.onchange = function() {
for(var j=0; j<all1.length; j++)
all1[j].checked = this.checked;
}
}(k)
}(i)
</script>

Но лучше с помощью nextElementSibling, previousElementSibling, parentNode. См. код дерева.
Дерево из checkbox
Задача:
если хотя бы один чекбокс прямого потомка выделен, то родитель помечен :indeterminate,
если все чекбоксы прямого потомка выделены, то родитель помечен галочкой :checked,
родитель отвечает за снятие/установку галочек всех дочерних чекбоксов,
семантический код,
у дерева может быть неограниченное число уровней, но скрипт и CSS при этом не увеличиваются.
Что не удалось:
если кликнуть по 2, а потом снять галку с 2.1.1, то у 2 и 2.1 будет :indeterminate. Всё верно. Но, если затем нажать на 2, то у 2.1 :indeterminate должно поменяться на :checked, а этого не происходит.
 1 2 2.1 2.1.1 2.1.1.1 2.1.1.2 2.1.1.3 2.1.2 2.1.3 2.2 2.3 2.4 3 3.1 3.2 3.3

<style>
[name="Tree"] fieldset {border: none;}
[name="Tree"] label:after {content: '\A'; white-space: pre;} /* после label идёт как бы br */


/* если нужно скрыть дочерние чекбоксы, если на родителе не стоит флажок или :indeterminate*//*
[name="Tree"] fieldset fieldset {padding-left: 20px; display: none;}
[name="Tree"] [type="checkbox"]:checked + label + fieldset,
[name="Tree"] [type="checkbox"]:indeterminate + label + fieldset {display: block;}
*/


</style>
<form name="Tree">
<fieldset>
<label><input type="checkbox"> 1</label>
<label><input type="checkbox"> 2</label>
<fieldset>
<label><input type="checkbox"> 2.1</label>
<fieldset>
<label><input type="checkbox"> 2.1.1</label>
<fieldset><label><input type="checkbox"> 2.1.1.1</label>
<label><input type="checkbox"> 2.1.1.2</label>
<label><input type="checkbox"> 2.1.1.3</label>
</fieldset>
<label><input type="checkbox"> 2.1.2</label>
<label><input type="checkbox"> 2.1.3</label>
</fieldset>
<label><input type="checkbox"> 2.2</label>
<label><input type="checkbox"> 2.3</label>
<label><input type="checkbox"> 2.4</label>
</fieldset>
<label><input type="checkbox"> 3</label>
<fieldset>
<label><input type="checkbox"> 3.1</label>
<label><input type="checkbox"> 3.2</label>
<label><input type="checkbox"> 3.3</label>
</fieldset>
</fieldset>
</form>


<script>
var t = document.forms.Tree;
var fieldset = [].filter.call(t.querySelectorAll('fieldset'), function(element) {return element;});
fieldset.forEach(function(eFieldset) {
var main = [].filter.call(t.querySelectorAll('[type="checkbox"]'), function(element) {return element.parentNode.nextElementSibling == eFieldset;});
main.forEach(function(eMain) {
var all = eFieldset.querySelectorAll('[type="checkbox"]');
eFieldset.onchange = function() {
var allChecked = eFieldset.querySelectorAll('[type="checkbox"]:checked').length;
eMain.checked = allChecked == all.length;
eMain.indeterminate = allChecked > 0 && allChecked < all.length;
}
eMain.onclick = function() {
for(var i=0; i<all.length; i++)
all[i].checked = this.checked;
}
});
});
</script>

Вот до такой удачной реализации (мало кода для столь объёмного элемента) я дошла путём проб и ошибок. Именно поэтому здесь выложено больше, чем нужно. Это варианты, которые я прорабатывала.
Как сделать полноценное дерево из checkbox
Если дерево большое, то вложенные пункты лучше прятать. В стилях предыдущей реализации в комментариях к коду CSS показано как. Минус того метода: нажмёшь 2, а потом убираешь галочки с 2.2, 2.3, 2.4 чтобы осталась галка только на 2.1. Поэтому рядом нужно поставить плюс/минус. Здесь совсем не заметен недостаток, озвученный выше.
плюсик и минус работают только если ни один из потомков не выделен,
если убрать выделение со всех пунктов, то список скроется, у родителя не будет checked,
если поставить флажок на родителя, то будут выделены все потомки, но показаны только дочерние.
если убрать флажок с родителя, то и потомки не будут выделены, кроме того они будут скрыты.
доработав код, можно чтобы при переходе по разным ссылкам, расположенных, скажем, на разных страницах, на страницу дерева с чекбоксами, раскрывалось дерево на нужном уровне, помечались требуемые чебоксы галочками.

<style>
.treeHTML { /* вся форма */
line-height: normal;
}
.treeHTML label { /* пункты и соединяющие их линии */
position: relative;
display: block;
padding: 0 0 0 1.2em;
}
.treeHTML label:not(:nth-last-of-type(1)) {
border-left: 1px solid #94a5bd;
}
.treeHTML label:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1.1em;
height: .5em;
border-bottom: 1px solid #94a5bd;
}
.treeHTML label:nth-last-of-type(1):before {
border-left: 1px solid #94a5bd;
}
.treeHTML fieldset,
.treeHTML fieldset[class=""] .razvernut { /* списки */
position: absolute;
visibility: hidden;
margin: 0;
padding: 0 0 0 2em;
border: none;
}
.treeHTML fieldset:not(:last-child) {
border-left: 1px solid #94a5bd;
}
.treeHTML .razvernut {
position: relative;
visibility: visible;
}
.treeHTML > fieldset > legend,
.treeHTML .razvernut > fieldset > legend { /* плюс */
position: absolute;
left: -5px;
top: 0;
height: 7px;
width: 7px;
margin-top: -1em;
padding: 0;
border: 1px solid #94a5bd;
border-radius: 2px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-color: #fff;
background-image: linear-gradient(to left, #1b4964, #1b4964), linear-gradient(#1b4964, #1b4964), linear-gradient(315deg, #a0b6d8, #e8f3ff 60%, #fff 60%);
background-size: 1px 5px, 5px 1px, 100% 100%;
visibility: visible;
cursor: pointer;
}
.treeHTML fieldset[class=""] .razvernut fieldset legend {
visibility: hidden;
}
.treeHTML .razvernut > legend { /* минус */
background-image: linear-gradient(#1b4964, #1b4964) !important;
background-size: 5px 1px !important;
}
</style>


<form name="Tree1" class="treeHTML" class="razvernut">
<label><input type="checkbox"> 1</label>
<label><input type="checkbox"> 2</label>
<fieldset><legend></legend>
<label><input type="checkbox"> 2.1</label>
<fieldset><legend></legend>
<label><input type="checkbox"> 2.1.1</label>
<fieldset><legend></legend>
<label><input type="checkbox"> 2.1.1.1</label>
<label><input type="checkbox"> 2.1.1.2</label>
<label><input type="checkbox"> 2.1.1.3</label>
</fieldset>
<label><input type="checkbox"> 2.1.2</label>
<label><input type="checkbox"> 2.1.3</label>
</fieldset>
<label><input type="checkbox"> 2.2</label>
<label><input type="checkbox"> 2.3</label>
<label><input type="checkbox"> 2.4</label>
</fieldset>
<label><input type="checkbox"> 3</label>
<fieldset><legend></legend>
<label><input type="checkbox"> 3.1</label>
<label><input type="checkbox"> 3.2</label>
<label><input type="checkbox"> 3.3</label>
</fieldset>
</form>


<script>
var t = document.forms.Tree1;
[].forEach.call(t.querySelectorAll('fieldset'), function(eFieldset) {
var main = [].filter.call(t.querySelectorAll('[type="checkbox"]'), function(element) {return element.parentNode.nextElementSibling == eFieldset;});
main.forEach(function(eMain) {
var l = [].filter.call(eFieldset.querySelectorAll('legend'), function(e) {return e.parentNode == eFieldset;});
l.forEach(function(eL) {
var all = eFieldset.querySelectorAll('[type="checkbox"]');
eL.onclick = Razvernut;
eFieldset.onchange = Razvernut;
function Razvernut() {
var allChecked = eFieldset.querySelectorAll('[type="checkbox"]:checked').length;
eMain.checked = allChecked == all.length;
eMain.indeterminate = allChecked > 0 && allChecked < all.length;
if (eMain.indeterminate || eMain.checked || ((eFieldset.className == '') && (allChecked == "0"))) {
eFieldset.className = 'razvernut';
} else {
eFieldset.className = '';
}
}
eMain.onclick = function() {
for(var i=0; i<all.length; i++)
all[i].checked = this.checked;
if (this.checked) {
eFieldset.className = 'razvernut';
} else {
eFieldset.className = '';
}
}
});
});
});
</script>

Деактивировать все флажки, кроме нескольких отмеченных
Как задать максимально возможное число чекбоксов, на которые можно установить галки? То есть дать выбрать только 3 любых чекбокса из 5 возможных. Свой выбор можно менять.

<form name="Form">
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
</form>


<script>
var f = document.forms.Form;
f.onchange = function() {
var n = f.querySelectorAll('[type="checkbox"]'),
l = f.querySelectorAll('[type="checkbox"]:checked');
for(var j=0; j<n.length; j++)
if (l.length >= 3) { // если отметить три и более галочки
n[j].disabled = true; // все чекбоксы становятся disabled
for(var i=0; i<l.length; i++)
l[i].disabled = false; // но disabled убирается с помеченных галочками чекбоксов
} else {
n[j].disabled = false; // если выделить менее трёх галочек, то disabled снимается со всех чекбоксов
}
}
</script>

Я, конечно, понимаю, что запись странновата, только вот .querySelectorAll('[type="checkbox"]:not([checked])') работает только для изначально установленных флажков.
Как посчитать сумму значений value у выбранных чекбоксов
Дальнейшие примеры при создании калькулятора или формы заказа на JavaScript
Сумма: 0

<form name="Sum">
<input type="checkbox" value="1"/>
<input type="checkbox" value="2"/>
<input type="checkbox"/>
<input type="checkbox" value=""/>
<input type="checkbox" value="3"/>
<input type="checkbox" value="4"/>
<input type="checkbox" value="5"/>
<output id="rezultat">Сумма: 0</output>
</form>

<script>
var s = document.forms.Sum,
d = s.querySelectorAll('input[type="checkbox"]:not([value]), input[type="checkbox"][value=""]');
for (var i = 0; i < d.length; i++) // чтобы не было написано NaN, убираем в disabled пункты, где не прописаны значения
d[i].disabled = true;
s.onchange = function() { // начало работы функции сложения
var n = s.querySelectorAll('[type="checkbox"]'),
itog = 0;
for(var j=0; j<n.length; j++)
n[j].checked ? itog += parseFloat(n[j].value) : itog;
document.getElementById('rezultat').innerHTML = 'Сумма: ' + itog;
}
</script>

Система координат

<div id="axis" class="one">
      <img class="object van move-right" src="images/van-to-right.png" alt="" />
</div>

.object {
position: absolute;
}
.van {
top: 45%;
left: 44%;
}

#axis:hover .move-right{
transform: translate(350px,0);
-webkit-transform: translate(350px,0); /** Chrome & Safari **/
-o-transform: translate(350px,0); /** Opera **/
-moz-transform: translate(350px,0); /** Firefox **/
}

.object {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}

<div id="axis" class="two">
<img class="object van move-left" src="images/van-to-left.png"/></div>

#axis:hover .move-left {
transform: translate(-350px,0);
-webkit-transform: translate(-350px,0); /** Safari & Chrome **/
-o-transform: translate(-350px,0); /** Opera **/
-moz-transform: translate(-350px,0); /** Firefox **/
}

<div id="axis">
<img class="object rocket move-up" src="images/rocket.png"/></div>

.rocket {
top: 43%;
left: 44%;
}

#axis:hover .move-up {
transform: translate(0,-350px);
-webkit-transform: translate(0,-350px);
-o-transform: translate(0,-350px);
-moz-transform: translate(0,-350px);
}

<div id="axis" class="four">
<img class="object coin move-down" src="images/coin.png"/>
</div>

#axis:hover .move-down {
transform: translate(0,350px);
-webkit-transform: translate(0,350px);
-o-transform: translate(0,350px);
-moz-transform: translate(0,350px);
}

3: Диагональное перемещение

Чтобы переместить объект по диагонали, мы совместим параметры x и y. Синтаксис будет следующим: transform: translate(x,y). В зависимости от направления, значение x и y может быть как положительным, так и отрицательным.
HTML

<div id="axis" class="five">
<img class="object plane move-ne" src="images/paper-plane.png"/>
</div>

CSS

#axis:hover .move-ne {
transform: translate(350px,-350px);
-webkit-transform: translate(350px,-350px);
-o-transform: translate(350px,-350px);
-moz-transform: translate(350px,-350px);
}

4: Вращение

Вращение в CSS3 регулируется градусными координатами (от 0° до 360°). Чтобы повернуть объект, примените следущие параметры: transform: rotate(ndeg); где n — градусы.

Вращение по часовой стрелке

Для того чтобы повернуть объект по часовой стрелке, применим положительное значение для rotate(ndeg).

HTML

<div id="axis" class="six">
<img class="object pencil rotate360cw" src="images/pencil.png"/>
</div>

CSS

#axis:hover .rotate360cw {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}

Вращение против часовой стрелки

Для того чтобы повернуть объект против часовой стрелки, применим отрицательное значение для rotate(ndeg).

HTML

<div id="axis" class="seven">
<img class="object pencil rotate360ccw" src="images/pencil.png"/>
</div>

CSS

#axis:hover .rotate360ccw {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
}

5: Масштабирование

Масштабирование — это интересная особенность CSS3. Используя параметр scale(n) или параметр scale(x,y), мы можем либо увеличивать, либо уменьшать объект непосредственно в рамках HTML. Объект будет менять размер в зависимости от значения n/x,y, где ось X — ширина, а Y — высота.
Давайте посмотрим на следующий пример.
HTML

<div id="axis" class="eight">
<img class="object car larger" src="images/car.png"/>
</div>

CSS

#axis:hover .larger{
transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-moz-transform: scale(2);
}

6: Множественные движения

После того как мы рассмотрели основные движения и трансформации, мы можем попробовать комбинировать их.
 

HTML

<div id="axis" class="ten">
<img class="object boomerang multiple-move" src="images/pencil.png"/>
</div>

CSS
План таков: нужно переместить бумеранг в правый верхний угол и одновременно вращать его. Для этого нужно просто перечислить команды через пробел.

#axis:hover .multiple {
transform: translate(350px, -350px) rotate(360deg);
-webkit-transform: translate(350px, -350px) rotate(360deg);
-o-transform: translate(350px, -350px) rotate(360deg);
-moz-transform: translate(350px, -350px) rotate(360deg);
}

Стили CSS для организации переноса строки по словам или буквам, когда она не вмещается в заданные границы

overflow-wrap: break-word;
word-wrap: break-word;
white-space: nowrap / white-space: normal: nowrap;
word-break: keep-all  / word-break: break-all;
line-break: loose / normal / strict;
hyphens: none / auto;

Синтаксис

white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

Значения

normal

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

nowrap

Пробелы не учитываются,  переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега <br>  переносит текст на новую строку.

pre

Текст показывается с учетом всех пробелов и  переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.

pre-line

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

pre-wrap

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

Наследует значение родителя.

Пример 1.  Использование тега <wbr>

.word {
width: 160px;
background: #f0f0f0;
border: 1px solid #333;
padding: 10px;
font-size: 18px;
}
<p class="word">Один<wbr>надцатиклас<wbr>сница Анжелика после окончания школы выбрала профессию дело<wbr>произ<wbr>водитель<wbr>ницы.</p>

Пример 2. Мягкий  перенос

.word {
width: 160px;
background: #f0f0f0;
border: 1px solid #333;
padding: 10px;
font-size: 18px;
}
<p class="word">Один&shy;надцатиклас&shy;сница Анжелика после окончания школы выбрала профессию дело&shy;произ&shy;водитель&shy;ницы.</p>

Пример 3. Свойство word-break

.word {
width: 160px;
background: #f0f0f0;
border: 1px solid #333;
padding: 10px;
font-size: 18px;
word-break: break-all;
}
<p class="word">Одиннадцатиклассница Анжелика после окончания школы выбрала профессию делопроизводительницы.</p>

Пример 4. Использование hyphens

.word {
width: 160px;
background: #f0f0f0;
border: 1px solid #333;
padding: 10px;
font-size: 18px;
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}

Пример 5. Запрет  переносов

.word {
width: 160px;
background: #f0f0f0;
border: 1px solid #333;
padding: 10px;
font-size: 18px;
}
<p class="word">Озеро по координатам 70°&nbsp;58′&nbsp;19″&nbsp;с.&nbsp;ш.97°&nbsp;24′&nbsp;5″&nbsp;в.&nbsp;д. расположено в Таймырском Долгано-Ненецком районе Красноярского края России.</p>

Правило @view-transition в CSS3 — это инструмент для создания плавных анимаций при переходе между разными HTML-страницами (в многостраничных приложениях, MPA). Оно работает в связке с View Transitions API — встроенным браузерным механизмом, который делает снимки DOM «до» и «после» обновления и анимирует переход между ними. 

Как это работает

При навигации браузер фиксирует текущее состояние страницы, выполняет обновление DOM, затем фиксирует новое состояние и запускает CSS-анимацию, интерполируя между ними.
Ключевое условие для кросс-документных переходов: обе страницы (исходная и целевая) должны находиться на одном origin (совпадать по протоколу, домену и порту). Иначе переход не сработает.
Базовый синтаксис:

@view-transition {
  navigation: auto;
}

navigation: auto;
 — разрешает переход при навигации. Браузер по умолчанию применяет кроссфейд (затухание) между старой и новой страницей.
navigation: none;
 — отключает плавные переходы (значение по умолчанию).

Важный нюанс: чтобы переход сработал, правило @view-transition
 нужно добавить на обе страницы. Если правило есть только на одной, переход не произойдёт. 

Кастомизация анимации

По умолчанию браузер сам решает, как анимировать переход (часто это кроссфейд). Но вы можете полностью переопределить анимацию, используя специальные псевдоэлементы и @keyframes

::view-transition-old(root)
 — стили для элементов старой страницы (состояние «до» обновления).
::view-transition-new(root)
 — стили для элементов новой страницы (состояние «после» обновления).

Пример:

/* Анимация, когда старая страница уходит */
::view-transition-old(root) {
  animation: slideOut 0.3s ease-in-out both;
}

/* Анимация, когда появляется новая страница */
::view-transition-new(root) {
  animation: slideIn 0.3s ease-in-out both;
}

/* Определение самих анимаций */
@keyframes slideOut {
  to { transform: translateX(-100%); }
}

@keyframes slideIn {
  from { transform: translateX(100%); }
}

Ещё один приём: можно дать общее имя перехода элементам, которые должны плавно перемещаться между страницами (например, общему изображению в карточке товара и на детальной странице). Для этого используется свойство view-transition-name

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

Правило @view-transition относится к CSS View Transitions Module Level 2, который поддерживает:

• Chrome 126+
• Edge 126+
• Safari 18.2+

В Firefox поддержка Level 2 пока в разработке.
Важное замечание: если браузер не поддерживает эту функцию, сайт продолжит работать в обычном режиме — @view-transition работает как прогрессивное улучшение.

Дополнительные возможности

Ограниченные переходы (Scoped Transitions). В Chrome 148+ появилась возможность ограничивать переход конкретным поддеревом DOM, а не всей страницей.
Учёт prefers-reduced-motion. Для доступности можно ограничить анимации для пользователей, которые предпочитают их отключать:

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

Вывод

@view-transition — мощный инструмент для создания плавных и выразительных переходов между страницами без необходимости писать много JavaScript. Главное — не забыть добавить это правило на обе стороны навигации и продумать анимации для общих элементов.

Стили CSS . Полностью рабочий пример

Одно из решений, которые приходится принимать фронтенд-разработчику при создании сайта, касается выбора способа включения изображений в состав веб-страниц. Этот способ может заключаться в использовании HTML-тега <img> . Это может быть применение CSS-свойства background или тега <image> элемента <svg> . Выбор правильного подхода к работе с изображениями весьма важен, так как это может очень сильно повлиять на производительность и доступность проекта.

HTML-элемент <img>

Элемент <img>  в простейших вариантах его использования содержит лишь необходимый для его правильной работы атрибут src

<img src="cool.jpg" alt="">

Настройка атрибутов width и height

Если не будут настроены ширина и высота изображения, то при загрузке странице с последующей загрузкой изображения макет страницы может понадобиться перестроить. Для того чтобы этого избежать, можно задать атрибуты width и height тега <img> :

<img src="cool.jpg" width="200" height="100" alt="">

Скрытие изображения средствами CSS

img {
display: none;
}

О доступности контента

<img class="food-thumb" width="300" height="200" src="cheescake.jpg">
<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">

Отзывчивые изображения

1. Атрибут srcset

<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">

2. HTML-элемент picture

<picture>
<source srcset="large.jpg" media="(min-width: 800px)" />
<source srcset="medium.jpg" media="(min-width: 500px)" />
<img src="small.jpg" />
</picture>

Изменение размеров изображений

img {
object-fit: cover;
object-position: 50% 50%;
}

Изображения, задаваемые CSS-свойством background

Как пользоваться CSS-свойством background

<div class="element">Some content</div>

.element {
background: url('cool.jpg');
}

Задание нескольких изображений в свойстве background

.element {
background: url('cool-1.jpg'), url('cool-2.jpg');
}

Скрытие изображения

@media (min-width: 700px) {
.element {
background: url('cool-1.jpg');
}
}

О доступности контента

Сложности с загрузкой background-изображений обычными пользователями

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

SVG-изображения

<svg width="200" height="200">
<image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

О доступности контента

<svg width="200" height="200">
<title>A photo of blueberry Cheescake</title>
<image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

<svg width="200" height="200">
<title>A photo of blueberry Cheescake</title>
<desc>A meaningful description about the image</desc>
<image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

Сложности с загрузкой <svg>-изображений обычными пользователями

Сценарии использования разных способов вывода изображений

Раздел страницы, выводимый в её верхней части

• Изображение должно поддерживать лёгкую динамическую смену при интеграции страницы с бэкенд-CMS.
• Поверх изображения должен быть наложен элемент, упрощающий чтение текста.
• Нужно поддерживать вывод изображения в трёх размерах: в маленьком, среднем и большом. Каждый из них предназначен для собственной области просмотра.

1. Важно ли это изображение с точки зрения пользователя, или он ничего не потеряет в том случае, если оно будет не видно?
2. Нужно ли, чтобы это изображение выводилось в областях просмотра всех размеров?
3. Является ли это изображение статическим, или оно динамически меняется (из CMS, например)?

Первый вариант решения задачи

.hero {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var('landscape.jpg');
background-repeat: no-repeat;
background-size: 100%, cover;
}

<section class="hero" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">
<!-- Hero content -->
</section>

<section class="hero" style="--bg-url: url('landscape.jpg')">
<!-- Hero content -->
</section>

Анализ

1. Предложенный здесь вариант решения задачи хорош лишь в том случае, если изображение не особенно важно.
2. Он может подойти в том случае, если изображение не планируется менять динамически, средствами CMS, используемой на бэкенде проекта.

Второй вариант решения задачи

<section class="hero">
<h2 class="hero__title">Using Images in CSS</h2>
<p class="hero__desc">An article about which and when to use</p>
<img src="landscape.jpg" alt="">
</section>

.hero {
position: relative;
}

.hero img {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}

.hero:after {
content: "";
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}

.hero img {
/* Другие стили */
background: #2962ff;
}

Логотип веб-сайта

• Элемент <img>, выводящий PNG, JPG или SVG-изображение.
• Встроенное SVG-изображение.
• Фоновое изображение.

Логотип с множеством деталей

<a href="#"><img src="logo.svg" alt="Nature Food"></a>

Простой логотип, который нужно анимировать

<a href="#">
<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
<rect fill="#D8D8D8" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
<text font-family="Rubik-Medium, Rubik" font-size="25" font-weight="400" fill="#6F6F6F">
<tspan x="63.923" y="36.923">Rect</tspan>
</text>
</g>
</svg>
</a>

.logo rect,
.logo text {
transition: 0.3s ease-out;
}

.logo:hover rect,
.logo:hover text {
fill: #4a7def;
}

Отзывчивый логотип

<a class="logo" href="/">
<picture>
<source media="(min-width: 1350px)" srcset="sm-logo--full.svg"><img src="sm-logo.svg" alt="Smashing Magazine"></picture>
</a>

.logo {
display: inline-block;
width: 45px;
}

@media (min-width: 1350px) {
.logo {
width: 180px;
}
}

Логотип с градиентом

<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#4a7def"></stop>
<stop offset="50%" stop-color="#ab4787"></stop>
</linearGradient>
</defs>
<g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
<rect fill="#AB4787" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
<text font-family="Rubik-Medium, Rubik" font-size="30" font-weight="400" fill="url(#gradient)">
<tspan x="63.923" y="36.923">Rect</tspan>
</text>
</g>
</svg>

Аватар пользователя

• С использованием <img>.
• С использованием <img> и вспомогательного элемента <div>.
• С использованием <div> и CSS-свойства background.
• С использованием <image> в <svg>.

Использование <img>

.avatar {
border: 2px solid #f2f2f2;
}

Использование <img> и вспомогательного элемента <div>

<div class="avatar-wrapper">
<img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
<div class="avatar-border"></div>
</div>

.avatar-wrapper {
position: relative;
width: 150px;
height: 150px;
}

.avatar-border {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.1);
}

Использование <div> и CSS-свойства background

<div class="avatar" style="--img-url: url(shadeed2.jpg)"></div>

.avatar {
background: var(--img-url) center/cover;
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}

Использование <image> в <svg>

<svg role="none" style="height: 36px; width: 36px;">
<mask id="avatar">
<circle cx="18" cy="18" fill="white" r="18"></circle>
</mask>
<g mask="url(#avatar)">
<image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
<circle cx="18" cy="18" r="18"></circle>
</g>
</svg>

1. Маска, обрезающая изображение в виде круга.
2. Группа, к которой применяется маска.
3. Само изображение с атрибутом preserveAspectRatio=«xMidYMid».
4. Круг, который используется в роли внутренней границы.

circle {
stroke-width: 2;
stroke: rgba(0, 0, 0, 0.1);
fill: none;
}

Поле ввода с иконкой

<p>
<label for="name">Full name</label>
<input type="text" id="name">
</p>

input {
background-color: #fff;
background-image: url('user.svg');
background-size: 20px 20px;
background-position: left 10px center;
background-repeat: no-repeat;
}

CSS-стили для печати

Постарайтесь не включать в страницы, предназначенные для печати, изображения, выводимые с помощью CSS-свойства background

.element {
background: url('cheesecake.png') center/cover no-repeat;
-webkit-print-color-adjust: exact; /* Принудительный вывод фонового изображения в режиме печати */
}

Свойства для Родителя (flex контейнер)

display

.container {
display: flex; /* or inline-flex */
}

flex-direction

.container {
flex-direction: row | row-reverse | column | column-reverse;
}

• row (по умолчанию): слева направо в ltr; справа налево в rtl
• row-reverse справа налево ltr; слева направо в rtl
• column: так же, как и rowно сверху вниз
• column-reverse: то же самое, row-reverseно снизу вверх

flex-wrap

.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (по умолчанию): все flex элементы будут в одной строке
• wrap: flex-элементы будут перенесены на несколько строк сверху вниз.
• wrap-reverse: flex-элементы будут перенесены на несколько строк снизу вверх.

flex-flow (Применяется к: родительскому элементу flex-контейнера)

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content

.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• flex-start (по умолчанию): элементы сдвинуты в начало flex-direction направления.
• flex-end: элементы сдвинуты ближе к концу flex направления.
• start: элементы сдвинуты к началу writing-modeнаправления.
• end: элементы сдвинуты в конце writing-modeнаправления.
• left: элементы сдвинуты по направлению к левому краю контейнера, если это не имеет смысла flex-direction, тогда он ведет себя как start.
• right: элементы сдвинуты по направлению к правому краю контейнера, если это не имеет смысла flex-direction, тогда он ведет себя как start.
• center: элементы центрированы вдоль линии
• space-between: элементы равномерно распределены по линии; первый элемент находится в начале строки, последний элемент в конце строки
• space-around: элементы равномерно распределены по линии с одинаковым пространством вокруг них. Обратите внимание, что визуально пространства не равны, так как все элементы имеют одинаковое пространство с обеих сторон. Первый элемент будет иметь одну единицу пространства напротив края контейнера, но две единицы пространства между следующим элементом, потому что у следующего элемента есть свой собственный интервал, который применяется.
• space-evenly: элементы распределяются таким образом, чтобы расстояние между любыми двумя элементами (и расстояние до краев) было одинаковым.

align-items

.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• stretch (по умолчанию): растягивать, чтобы заполнить контейнер (все еще соблюдаются min-width / max-width)
• flex-start/ start/ self-start: элементы размещаются в начале поперечной оси. Разница между ними невелика и заключается в соблюдении flex-direction правил или writing-mode правил.
• flex-end/ end/ self-end: элементы располагаются в конце поперечной оси. Разница опять-таки тонкая и заключается в соблюдении flex-direction или writing-mode правил.
• center: элементы центрированы по поперечной оси
• baseline: элементы выровнены, по их базовой линии

align-content

.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• flex-start/ start: элементы, сдвинуты в начало контейнера. Более поддерживаемый flex-startиспользует, flex-directionв то время как startиспользует writing-modeнаправление.
• flex-end/ end: элементы, сдвинуты в конец контейнера. Более поддерживаемый flex-endиспользует flex-directionв то время как endиспользует writing-modeнаправление.
• center: элементы выровнены по центру в контейнере
• space-between: элементы равномерно распределены; первая строка находится в начале контейнера, а последняя — в конце
• space-around: элементы равномерно распределены с равным пространством вокруг каждой строки
• space-evenly: элементы распределены равномерно, вокруг них одинаковое пространство
• stretch (по умолчанию): линии растягиваются, чтобы занять оставшееся пространство

Свойства для первых дочерних элементов(flex элементы)

order

.item {
order: <integer>; /* default is 0 */
}

flex-grow

.item {
flex-grow: <number>; /* default 0 */
}

flex-shrink

.item {
flex-shrink: <number>; /* default 1 */
}

flex-basis

.item {
flex-basis: <length> | auto; /* default auto */
}

flex

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

align-self

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Примеры

.parent {
display: flex;
height: 300px; /* Или что угодно */
}

.child {
width: 100px; /* Или что угодно */
height: 100px; /* Или что угодно */
margin: auto; /* Магия! */
}

.flex-container {
/* Сначала мы создаем flex контекст */
display: flex;
/* Затем мы определяем flex-direction и разрешаем элементам переходить на новые строки
* Запомните, что это то же самое что и:
* flex-direction: row;
* flex-wrap: wrap;
*/

flex-flow: row wrap;
/* Затем мы определяем, как распределяется оставшееся пространство */
justify-content: space-around;
}

/* Большие экраны */
.navigation {
display: flex;
flex-flow: row wrap;
/* Это выровняет элементы по конечной части линии на главной оси */
justify-content: flex-end;
}

/* Средние экраны */
@media all and (max-width: 800px) {
.navigation {
/* На экранах среднего размера мы центрируем элементы, равномерно распределяя пустое пространство вокруг элементов */
justify-content: space-around;
}
}

/* Маленькие экраны */
@media all and (max-width: 500px) {
.navigation {
/* На маленьких экранах мы больше не используем направление строки, а используем столбец */
flex-direction: column;
}
}

.wrapper {
display: flex;
flex-flow: row wrap;
}

/* Мы говорим, что все элементы имеют ширину 100%, через flex-base */
.wrapper > * {
flex: 1 100%;
}

/* Мы используем исходный порядок для первого мобильно варианта
* 1. header
* 2. article
* 3. aside 1
* 4. aside 2
* 5. footer
*/

/* Средние экраны */
@media all and (min-width: 600px) {
/* Мы говорим обеим боковым панелям встать в одну строку */
.aside { flex: 1 auto; }
}

/* Большие экраны */
@media all and (min-width: 800px) {
/* Мы инвертируем порядок первой боковой панели и основной и говорим главному элементу, чтобы он занимал вдвое большую ширину, чем две другие боковые панели
*/

.main { flex: 2 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}

Префикс для Flexbox

@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}

@mixin order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}

.wrapper {
@include flexbox();
}

.item {
@include flex(1 200px);
@include order(2);
}

CSS синтаксис

flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit;

Возможные значения

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

#main div {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
}

CSS Grid Layout спроектирован таким образом, чтобы работать вместе с другими частями CSS и составлять с ними законченную систему создания макетов страниц. В рамках этого руководства, мы объясним, каким образом сочетать гриды с другими техниками, которыми Вы, возможно, уже пользуетесь в своей работе.

Grid и flexbox

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

Одномерное vs Двумерное позиционирование

Простой пример поможет нам продемонстрировать разницу между одно- и двумерным позиционированием.

В пером примере мы воспользуемся flexbox для того, чтобы разместить несколько блоков. Предположим, что у нас есть пять дочерних элементов в контейнере, зададим им значения flex-свойств таким образом, чтобы их размер увеличивался и уменьшался, начиная с базового в 200px.

Также установим свойство flex-wrap в значение wrap . Это приведёт к тому, что если свободного пространства в нашем контейнере будет не хватать для размещения элемента в 200px, наши элементы спокойно перейдут на новую строку.

<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>

.wrapper {
display: flex;
flex-wrap: wrap;
}
.wrapper > div {
flex: 1 1 200px;
}

На картинке вы видите, что два элемента перешли на новую строку. Эти элементы поделили свободное пространство между собой, а не выровнялись по элементам над ними. Происходит это потому, что каждая новая строка (или колонка, если мы работаем с колонками) становится новым flex-контейнером. А во flex-контейнере распределение свободного пространства действует в рамках всей строки.

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

Тот же макет, но с CSS гридами

В примере ниже мы создаём тот же самый макет, но используя гриды. На этот раз у нас три трека-колонки шириной в 1fr . И при этом нам не требуется задавать какие-либо свойства дочерним элементам, потому что они самостоятельно занимают по одной ячейке созданного грида. Как видите, наши элементы лежат в жёсткой сетке и выравниваются и по строке, и по колонке. Поскольку у нас пять элементов, в результате мы получаем пустую ячейку в конце второй строки.

<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

Если вы колеблетесь, что выбрать - flexbox или grid, задайте себе простой вопрос:

• нужно управлять размещением элементов в строке или в колонке - используем flexbox

• нужно управлять размещением элементов в строке и в колонке – используем grid

Что важнее: контент или макет?

В дополнение к различию между позиционированию в одном направлении и позиционированию в двух направлениях, существует ещё один способ решить, нужен ли вам макет, основанный на flexbox или макет, основанный на гридах. Flexbox работает исходя из размеров контента. Идеальный случай использования flexbox - когда у вас есть набор элементов, а вам нужно распределить их в контейнере равномерно. Вы позволяете размеру содержимого элементов решить, сколько пространства должен забрать каждый элемент. Если элементы переходят на новую строку, они забирают для себя пространство, исходя из своих размеров и того свободного места, которое есть в этой строке .

Грид работает, исходя из макета. Когда вы используете CSS Grid Layout, вы создаёте структуру и затем размещаете элементы именно в этой структуре или же позволяете правилам авто-размещения разместить элементы в грид-ячейках в соответствии с жёстко заданной сеткой. Конечно, существует возможность создавать треки, подстраивающиеся под размер контента, но при этом они также меняют саму структуру.

Поэтому, если вы используете flexbox и вдруг обнаруживаете, что ограничиваете эластичность элементов, возможно, вам нужно посмотреть в сторону CSS Grid Layout. Например, в том случае, если вы процентами подгоняете ширину flex-элемента, чтобы выровнять его по элементам в строке сверху. В такой ситуации гриды кажутся более оптимальным выбором.

Выравнивание блоков

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

Свойства выравнивания из спецификации flexbox были добавлены в новую спецификацию, названную Box Alignment Level 3. А это означает, что они могут использоваться и в других спецификациях, в том числе и в Grid Layout.

Дальше в нашем руководстве мы подробно рассмотрим выравнивание блоков Box Alignment и то, как оно работает в Grid Layout, а здесь давайте рассмотрим два простых примера, и сравним flexbox и гриды.

В первом примере, использующем flexbox, у нас есть контейнер с тремя элементами. Для блока-обёртки wrapper установлено свойство min-height, и оно задаёт высоту flex-контейнера. Мы установили свойство align-items flex-контейнера в значение flex-end , поэтому элементы выравниваются по концу flex-контейнера. Мы также установили значение свойства align-self для box1 таким образом, что оно перезапишет поведение по умолчанию и заставит наш блок растянутся на всю высоту контейнера. Для box2 свойство align-self установлено таким образом, что блок перепрыгнет в начало flex-контейнера.

<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>

.wrapper {
display: flex;
align-items: flex-end;
min-height: 200px;
}
.box1 {
align-self: stretch;
}
.box2 {
align-self: flex-start;
}

Тем временем в параллельной вселенной: выравнивание в CSS Гридах

Второй пример использует грид, чтобы создать тот же самый макет, и на этот раз мы рассмотрим то, как свойства выравнивания блоков применяются к гридам. Вместо flex-start и flex-end мы задаём start и end . В случае с макетом на гридах мы выравниваем grid-row элементы внутри их грид-области, в данном примере - это одна единственная грид-ячейка, но в целом грид-область может состоять из нескольких грид-ячеек.

<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(3,1fr);
align-items: end;
grid-auto-rows: 200px;
}.box1 {
align-self: stretch;
}
.box2 {
align-self: start;
}

Единица fr и flex-basis

Мы уже видели, как работает единица fr в случае пропорционального распределения доступного пространства между грид-треками в грид-контейнере. При комбинировании frс функцией minmax() мы получаем поведение, очень похожее на свойство flex в flexbox - и при этом по-прежнему можем создавать макет в двумерной системе.

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

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

Автозаполнение грид-треков

Можно создать эффект, похожий на поведение flexbox, и при этом по-прежнему держать контент в жёсткой сетке из строк и колонок, если задать структуру треков, используя repeat-нотацию и свойства auto-fill и auto-fit.

В примере ниже мы используем ключевое слово auto-fill вместо целого числа в repeat-нотации и задаём структуру треков размером в 200 пикселей. Это значит, что грид создаст столько треков-колонок размером в 200 пикселей, сколько их может разместиться в контейнере.

<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
}

Переменное количество треков

Давайте вспомним пример с flexbox, когда элементы, размер которых больше 200 пикселей, переходят на новую строку. Тот же самый эффект в гридах мы можем получить комбинируя auto-fill и функцию minmax(). В примере ниже мы создаём автозаполненные треки с помощью minmax. Мы хотим, чтобы треки были как минимум 200 пикселей в ширину, это наше минимальное значение, а для максимального зададим 1fr. В процессе, когда браузер вычисляет, сколько блоков в 200 пикселей может разместиться в контейнере - при этом учитывая грид-зазоры - он расценивает максимум 1fr как инструкцию распределить оставшееся свободное пространство между этими блоками.

<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

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

Гриды и абсолютно позиционированные элементы

Грид взаимодействует с абсолютно позиционированными элементами, что отнюдь не бесполезно, если вы хотите разместить элемент внутри грида или грид-области. В спецификации описано поведение грида и тогда, когда грид-контейнер является контейнерным блоком (containing block) и тогда, когда грид-контейнер - родительский элемент для абсолютно позиционированного элемента.

Грид-контейнер как контейнерный блок

Для того, чтобы превратить грид-контейнер в контейнерный блок вам нужно добавить ему свойство position со значением relative. Если после этого задать какому-нибудь грид-элементу position:absolute , грид-контейнер станет контейнерным блоком для данного элемента.

В примере ниже у нас есть блок-обёртка с четырьмя дочерними элементами. Третий элемент абсолютно позиционирован и одновременно размещён в гриде с помощью привязки к грид-линиям. У грид-контейнера position:relative , поэтому он становится контекстом позиционирования для нашего третьего элемента.

<div class="wrapper">
   <div class="box1">One</div>
   <div class="box2">Two</div>
   <div class="box3">
    Этот блок абсолютно позиционирован.
В нашем примере грид-контейнер является контейнерным блоком, поэтому значения сдвига абсолютного позиционирования отсчитываются от внешнего края той области, в которой размещён элемент.
   </div>
   <div class="box4">Four</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-auto-rows: 200px;
grid-gap: 20px;
position: relative;
}
.box3 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
position: absolute;
top: 40px;
left: 40px;
}

Вы видите, что наш элемент занимает область от колоночной грид-линии 2 до колоночной грид-линии 4 и начинается после строчной линии 1. С помощью свойств left и top мы сдвигаем его относительно этой области. В то же время, он изымается из потока так же, как и любой другой элемент с абсолютным позиционированием, поэтому правила авторазмещения теперь помещают другие элементы на его место. Абсолютное позиционирование нашего элемент также не приводит к появлению новой строки.

Попробуйте удалить position:absolute из правил для .box3 , и увидите, как он размещался бы без абсолютного позиционирования.

Грид-контейнер в качестве родительского элемента

Если у абсолютно позиционированного элемента в качестве родительского контейнера выступает грид, не создающий новый контекст позиционирования, наш элемент также вытаскивается из потока, как и в предыдущем примере. Но в этом случае контекстом позиционирования будет любой элемент, который как раз и создаёт этот контекст позиционирования. Словом, если в нашем примере мы уберём position:relative из блока-обёртки, контекстом позиционирования станет область просмотра, что хорошо видно на рисунке ниже.

Ещё раз: наш элемент больше не занимает пространство в грид-макете и не влияет на то, как располагаются другие элементы при авторазмещении.

А что если родительский элемент - это грид-область?

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

Задаём .box3 свойство position в значении relative и затем перемещаем наш под-элемент с помощью свойств сдвига. В данном случае контекстом позиционирования является грид-область.

<div class="wrapper">
   <div class="box1">One</div>
   <div class="box2">Two</div>
   <div class="box3">Three
       <div class="abspos">
        Этот блок абсолютно позиционирован. В данном примере контекстом позиционирования является грид-область, поэтому значения сдвига отсчитываются от внешних краёв грид-области.
       </div>
   </div>
   <div class="box4">Four</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-auto-rows: 200px;
grid-gap: 20px;
}
.box3 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
position: relative;
}
.abspos {
position: absolute;
top: 40px;
left: 40px;
background-color: rgba(255,255,255,.5);
border: 1px solid rgba(0,0,0,0.5);
color: #000;
padding: 10px;
}

Грид и display:contents

Последнее, о чем нужно упомянуть, говоря о взаимодействии гридов с другими спецификациями, касающимися позиционирования элементов, - это взаимодействие между CSS Grid Layout и display:contents. Значение contents свойства display - новое свойство CSS, которое описывается в спецификации Display следующим образом:

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

Если вы пишете для элемента display:contents , блок (бокс), который он должен создать в дереве документа исчезает, а вот блоки его дочерних элементов и его псевдо-элементов переходят на один уровень вверх. А значит это то, что дочерние элементы грид-элемента могут сами стать грид-элементами. Звучит непонятно? Давайте разберёмся на простом примере. В разметке ниже у нас есть грид. Первый элемент этого грида настроен так, чтобы занимать все три трека-колонки. У него есть три вложенных элемента. Поскольку эти вложенные элементы не являются прямыми потомками грида, они не становятся частью грид-макета и отображаются, как обычные блоки.

<div class="wrapper">
<div class="box box1">
<div class="nested">a</div>
<div class="nested">b</div>
<div class="nested">c</div>
</div>
<div class="box box2">Two</div>
<div class="box box3">Three</div>
<div class="box box4">Four</div>
<div class="box box5">Five</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
}

Если мы теперь добавим правило display:contents для box1, блок этого бокса исчезнет, зато дочерние элементы станут грид-элементами и будут расположены в соответствии с правилами авторазмещения.

<div class="wrapper">
<div class="box box1">
<div class="nested">a</div>
<div class="nested">b</div>
<div class="nested">c</div>
</div>
<div class="box box2">Two</div>
<div class="box box3">Three</div>
<div class="box box4">Four</div>
<div class="box box5">Five</div>
</div> 

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
display: contents;
} 

Таким образом мы можем заставить вложенные элементы вести себя, словно они часть грида (и в некотором смысле имитация того поведения, которое должны будут реализовать подгриды (subgrids), когда руки разработчиков браузеров до них доберутся). Точно так же можно использовать display:contents с flexbox, чтобы вложенные элементы становились flex-элементами.

Что такое CSS селекторы

селектор {
свойство: значение;
свойство: значение;
...
}

p {
text-align: center;
font-size: 20px;
}

Базовые селекторы

Селектор по элементу (тегу)

/* селектор p выберет все элементы p на странице */
p {
padding-bottom: 15px;
}

Селектор по классу

/* селектор .center выберет все элементы, имеющие класс center */
.center {
text-align: center;
}

Селектор по идентификатору (id)

/* селектор #footer выберет элемент, имеющий идентификатор footer */
#footer {
height: 50px;
margin-top: 20px;
}

/* селектор * выберет все элементы на странице */
* {
margin: 0;
padding: 0;
}

CSS селекторы по атрибуту

[attr]– по имени атрибута;
[attr=value]– по имени и значению атрибута;
[attr^=value]– по имени и значению, с которого оно должно начинаться;
[attr|=value]– по имени атрибута и его значению, которое равно valueили начинается со value-;
[attr$=value]– по имени атрибута и значению, на которое оно должно заканчиваться;
[attr*=value]– по указанному атрибуту и значению, которое должно содержать value;
[attr~=value]– по имени атрибута и значению, которое содержит valueотделённое от других с помощью пробела.

[attr]

/* селектор [target] выберет все элементы на странице, имеющих атрибут target */
[target] {
background-color: red;
}

/* селектор [rel="nofollow"] выберет все элементы на странице, имеющих атрибут rel со значением nofollow */
[rel="nofollow"] {
background-color: green;
}

[attr^=value]

/* селектор [class^="col"] выберет все элементы на странице, имеющих атрибут class, значение которого начинается с col */
[class^="col"] {
background-color: yellow;
}

[attr|=value]

/* селектор [class|="test"] выберет все элементы на странице, имеющих атрибут class, значение которого равно test или начинается с test- */
[class|="test"] {
background-color: orange;
}

[attr$=value]

/* селектор [class$="color"] выберет все элементы на странице, имеющих атрибут class, значение которого заканчивается на color */
[class$="color"] {
background-color: yellow;
}

[attr*=value]

/* селектор [href*="youtu.be"] выберет все элементы на странице, имеющих атрибут href, значение которого содержит youtu.be */
[href*="youtu.be"] {
background-color: green;
}

[attr~=value]

/* селектор [data-content~="news"] выберет все элементы на странице, имеющих атрибут data-content, значение которого содержит news, отделённое от других с помощью пробела */
[data-content~="news"] {
background-color: brown;
}

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

Псевдоклассы для выбора элементов в зависимости от их состояния

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

/* селектор a.external:link выберет все элементы a с классом external пользователь по которым ещё не переходил */
a.external:link {
color: red;
}

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

/* селектор .side a:visited выберет все элементы a, находящиеся в .aside, пользователь которые уже посетил */
.aside a:visited {
color: #000;
}

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

/* селектор a:active выберет все элементы a, находящиеся в активном состоянии */
a:active {
background-color: yellow;
}

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

/* селектор .btn-warning:hover выберет все элементы .btn-warning при поднесении к ним курсора */
.btn-warning:hover {
color: #fff;
background-color: #ff8f00;
}

a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }

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

/* селектор input[type="text"] найдет элемент input с атрибутом type="text" при нахождении его в фокусе */
input[type="text"]:focus {
background-color: #ffe082;
}

По расположению среди соседей

Псевдокласс :first-child

/* селектор li:first-child выберет элементы li, которые являются первыми элементами своего родителя */
li:first-child {
font-weight: bold;
}

Псевдокласс :last-child

/* селектор .alert-warning:last-child выберет элементы .alert-warning которые являются последними элементами своего родителя */
.alert-warning:last-child {
font-weight: bold;
}

Псевдокласс :only-child

h2:only-child {
...
}

Псевдокласс :nth-child (выражение)

/* селектор .li:nth-child(2) выберет элементы li, которые явлются вторыми элементами своего родителя */
.li:nth-child(2) { ... }
/* селектор .li:nth-child(odd) выберет элементы li, которые явлются нечётными элементами (1, 3, 5, ...) своего родителя */
.li:nth-child(odd) { ... }
/* селектор .li:nth-child(even) выберет элементы li, которые явлются чётными элементами (2, 4, 6, ...) своего родителя */
.li:nth-child(even) { ... }
/* селектор .li:nth-child(2n+1) выберет элементы li, которые имеют порядковые номера 1, 3, 5, 7, ... внутри своего родителя */
.li:nth-child(2n+1) { ... }

Псевдокласс :nth-last-child (выражение)

По расположению среди соседей с учётом типа элемента

Псевдокласс :first-of-type

p:first-of-type {
...
}

<section>
<h2>...</h2>
<p>...</p> <!-- будет выбран этот элемент -->
<p>...</p>
</section>
<section>
<h2>...</h2>
<p>...</p> <!-- будет выбран этот элемент -->
<p>...</p>
</section>

Псевдокласс :last-of-type

li:last-of-type {
...
}

Псевдокласс :only-of-type

p:only-of-type {
...
}

Псевдокласс :nth-of-type (выражение)

<section>
<h2>...</h2>
<p>...</p> <!-- Селектор p:nth-child(2) выберет этот элемент -->
<p>...</p> <!-- Селектор p:nth-of-type(2) выберет этот элемент -->
</section>

Псевдокласс :nth-last-of-type (выражение)

Псевдоклассы для элементов форм

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

<div class="form-group">
<input type="checkbox" id="answer-1">
<label for="answer-1">Я знаю что такое :checked</label>
</div>

input:checked + label {
background-color: yellow;
}

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

input:enabled {
background-color: yellow;
}

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

input:disabled {
...
}

Остальные псевдоклассы

Псевдокласс :not (селектор)

/* Селектор .aside > div:not(:first-child) выберет все элементы div кроме первого непосредственно расположенные в .aside */
.aside > div:not(:first-child) { ... }

/* такие конструкция работать не будет */
:not(:not(...)) { ... }
div:not(.alert.alert-warning) { ... }
.item:not(::before) { ... }
.slider .slider__item:not(.active img) { ... }
td:not(.row + td) { ... }

/* применим стили ко всем элементам div, расположенных непосредственно в .message, за исключением .alert-warning и .alert-danger */
.message > div:not(.alert-warning):not(.alert-danger) { ... }

// этот селектор выберет все элементы p, которые не содержат класс alert
p:not(.alert) {
...
}

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

div:empty {
...
}

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

:root {
--text-info: hotpink;
--text-warning: hotpink;
--aside-padding: 10px 15px;
}

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

<h2 id="header-1">...</h2>
<h2 id="header-2">...</h2>

:target {
color: red;
}

Группировка селекторов

/* селектор h3, h4 выберет все элементы на странице, имеющих тег h3 и h4 */
h3, h4 {
font-size: 20px;
margin-top: 15px;
margin-bottom: 10px;
}

Комбинирование селекторов

.modal.open {
...
}

.btn[data-toggle="collapse"]:first-child { ... }

Селекторы отношений

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

Селектор X Y (для выбора вложенных или дочерних элементов)

Селектор X > Y

Селектор X + Y

Селектор X ~ Y

Приоритет селекторов

• универсальный селектор (не добавляет вес) – 0,0,0,0;
• селекторы по тегу, псевдоэлемент добавляют единичку к четвёртой цифре – 0,0,0,1;
• селекторы по классу и по атрибуту, псевдоклассы добавляют единичку ко третьей цифре – 0,0,1,0;
• селектор по идентификатору добавляют единичку ко второй цифре – 0,1,0,0;

*– 0,0,0,0;
li– 0,0,0,1;
li::before– 0,0,0,2;
ul > li– 0,0,0,2;
div input+label– 0,0,0,3;
h1 + div[data-target]– 0,0,1,2;
.btn.show– 0,0,2,0;
ul li a.item– 0,0,1,3;
#aside div.show– 0,1,1,1;
style="..."– 1,0,0,0;

<div class="alert-warning" style="background-color: #ffc107;"> ... </div>

.alert-warning {
background-color: #ffa000 !important;
}

<p id="message" style="font-size: 20px !important;">...</p>

p#message {
font-size: 16px !important;
}

Каких селекторов нет в CSS

<header> представляет заголовок раздела. Он не вводит новый раздел. Элемент <header> может содержать также навигационную секцию.

<header>
            <h1>Website Name</h1>
</header>

<nav> представляет раздел страницы, ссылки на другие страницы или частей в пределах страницы. Элемент nav предназначен для навигации секций.

<!-- Main Navigation -->
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/services">Services</a></li>
                <li><a href="/portfolio">Portfolio</a></li>
                <li><a href="/about">About</a></li>
            </ul>
        </nav>

<section> представляет общий раздел документа или приложения. <section> Элемент группы тематическое содержание. Он может быть использован вместе с h1 - h6, чтобы указать структуру документа.

<section>
            <h1>Some big title</h1>
            <p>Some text about the website</p>
</section>

<main> представляет основное содержание тела документа или приложения, которые непосредственно связаны с центральной темой документа или центральной функциональности приложения.

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

<!-- List of articles -->
        <main>
                <article>
                    <header>
                        <h1>Article title</h1>
                    </header>
                    <p>First paragraph</p>
                    <p>Second paragraph</p>
                </article>
                <article>
                    <header>
                        <h1>Article title</h1>
                    </header>
                    <p>First paragraph</p>
                    <p>Second paragraph</p>
                </article>
        </main>

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

<!-- Second Navigation can be in aside tag -->
        <aside>
            <nav>
                <ul>
                    <li><a href="/sub1"></a>Subcategory 1</li>
                    <li><a href="/sub2"></a>Subcategory 2</li>
                    <li><a href="/sub3"></a>Subcategory 3</li>
                    <li><a href="/sub4"></a>Subcategory 4</li>
                </ul>
            </nav>
            <section>
            <h1>Most popular</h1>
            <ul>
                <li><a href="/popular-1"></a>Popular 1</li>
                <li><a href="/popular-2"></a>Popular 2</li>
                <li><a href="/popular-3"></a>Popular 3</li>
            </ul>
            </section>
        </aside>

 <footer> представляет собой колонтитуле для раздела и может содержать информацию об авторе, информация об авторских правах и т.д.

<footer>
            <p>Copyright © 2015</p>
</footer>

Изображения

image, img, picture, pic

— картинка

icon — иконка

logo — логотип

userpic, avatar — юзерпик, маленькая картинка пользователя

thumbnail, thumb — миниатюра, уменьшенное изображение

Текст

title, subject, heading, headline, caption — заголовок

subtitle — подзаголовок

slogan — слоган

lead, tagline — лид-абзац в тексте

text — текстовый контент

desc — описание, вариант текстового контента

excerpt — отрывок текста, обычно используется перед ссылкой «Читать далее...»

quote, blockquote — цитата

snippet — пример кода

link — ссылка

copyright, copy — копирайт

Списки

list, items — список

item — элемент списка

<ul class="list">
  <li class="item">Первое</li>
  <li class="item">Второе</li>
  <li class="item">Третье</li>
</ul>

Картинка пользователя (юзерпик)

<div class="user">
  <img class="user__img" src="userpic.png" alt="Дормидонт Петрович">
  <a class="user__link" href="#">Дормидонт Петрович</a>
</div>

<div class="gallery">
  <ul class="gallery__list">
    <li class="gallery__item">
      <img class="gallery__img" src="flowers.jpg" alt="Цветём как в последний раз">
    </li>
    <li class="gallery__item">
      <img class="gallery__img" src="trees.jpg" alt="Парк «Три сосны»">
    </li>
  </ul>
</div>

<nav class="nav">
  <a class="nav__link nav__link--active">Главная</a>
  <a class="nav__link" href="#">Второстепенная</a>
  <a class="nav__link" href="#">Третья с конца</a>
  <a class="nav__link" href="#">Предпоследняя</a>
  <a class="nav__link" href="#">Совсем конец</a>
</nav>
<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item nav__item--current">
      <a class="nav__link">Главная</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Статьи</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Фотогалерея</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Контакты</a>
    </li>
  </ul>
</nav>

<div class="widget">
  <h4 class="widget__title">Выращиваем желе</h4>

  <div class="widget__content">
    <p>Чтобы вырастить общительное дружелюбное желе,
    нам потребуется рулон поролона, два килограмма сахара,
    три яйца и пол чайной чашки ацетона.</p>

    <a class="widget__link" href="#">Не читать дальше...</a>
  </div>
</div>

<div class="news">
    <h3 class="news__title">Вчерашние новости</h3>

    <ul class="news__list">
        <!-- к классу элемента добавляем класс блока,
             чтобы создать новое пространство имён -->
        <li class="news__item item-news">
            <h4 class="item-news__title">Соревнования среди воблы по конькобежному спорту</h4>
            <div class="item-news__text">
              <p>Победила команда килек из Петрозаводска</p>

              <a href="#" class="item-news__link">Читать дальше</a>
            </div>
        </li>

        <li class="news__item item-news">
            <h4 class="item-news__title">Учёные уточнили роль напильника в уходе за ногтями</h4>
            <div class="item-news__text">
              <p>Британские учёные высоко оценили вклад
                напильника в отращивание полутораметровых ногтей.</p>

              <a href="#" class="item-news__link">Не читать дальше</a>
            </div>
        </li>
    </ul>
</div>

<article class="article">
  <h3 class="article__title">Нащупываем чакры у пучка петрушки</h3>
  <time class="article__datetime">32 мая, 10:87</time>

  <div class="article__author author-article">
    <img class="author-article__img" src="userpic.png" alt="Клешня Андреевна">
    <a class="author-article__link" href="#">Клешня Андреевна Долгорукая</a>
    <div class="author-article__desc">Наш эксперт по чакрам</div>
  </div>

  <div class="article__content">
    Сходите на рынок и купите у старушек пучок петрушки грамм на 100.
    Как следует переберите, очистите от жуков и гусениц. Жуков отдайте поиграться
    коту, гусениц поселите в горшок с кактусами, пусть одна будет Джоном,
    вторая Билли, а у вас в горшке теперь будет Дикий Запад. Вернитесь
    к пучку петрушки. Ласково взгляните на него и как следует почешите
    за ухом, можно себе или коту. Перевяжите атласной ленточкой,
    непременно завяжите бант. Поздравляем! Теперь у вас есть полностью
    одомашненный пучок петрушки, который будет весело бегать за вами
    по пятам и проращивать свои семена в ваших тапках.
  </div>
</article>

<article class="entry">
  <header class="entry__header">
    <h3 class="entry__title title-entry">
      <a class="title-entry__link" href="#">Резиновые уточки как способ самопознания</a>
    </h3>

    <time class="entry__datetime">32 мая, 10:87</time>
  </header>

  <div class="entry__author author-entry">
    <img class="author-entry__img" src="userpic.png" alt="Василиса Сергеевич">

    <a class="author-entry__link" href="#">Василиса Сергеевич</a>
  </div>

  <div class="entry__content">
    Достаньте с чердака коробку с полусотней резиновых уточек,
    оставшихся после празднования нового года. Из уточек
    и горящих свечей выложите пентаграмму на полу комнаты.
    Сядьте посередине в позу лотоса, в каждую руку возьмите
    по немецко-бразильскому словарю, прокашляйтесь, наберите
    полную грудь воздуха и громко и уверенно,
    с полной самоотдачей скажите "Кря!"
  </div>

  <div class="entry__tags tags-entry">
    <h4 class="tags-entry__title">Метки</h4>

    <ul class="tags-entry__list">
      <li class="tags-entry__item">
        <a class="tags-entry__link" href="#">хоровод своими руками</a>
      </li>
      <li class="tags-entry__item">
        <a class="tags-entry__link" href="#">фарфоровые тапки</a>
      </li>
      <li class="tags-entry__item">
        <a class="tags-entry__link" href="#">гуталин в кулинарии</a>
      </li>
    </ul>
  </div>

  <div class="entry__actions actions-entry">
    <ul class="actions-entry__list">
      <li class="actions-entry__item actions-entry__item--read">
        <a class="actions-entry__link" href="#">238 ответов</a>
      </li>
      <li class="actions-entry__item actions-entry__item--write">
        <a class="actions-entry__link" href="#">Написать в спортлото</a>
      </li>
      <li class="actions-entry__item actions-entry__item--share">
        <a class="actions-entry__link" href="#">Поделиться</a>
      </li>
    </ul>
  </div>
</article>