Страница 1 из 1

CSS селекторы

Добавлено: Пн окт 11, 2021 8:02 pm
Suver
Отрицающий псевдокласс :not
Селектор :not появился в третьей версии, но в четвёртой он был обновлён. В третьей спецификации вы можете передать селектор, к которому не должны применяться CSS-свойства. Для того чтобы весь текст, кроме текста с классом .intro стал полужирным, вы можете использовать следующее правило.

p:not(.intro) {

font-weight: bold;

}
В четвёртой версии вы можете передавать список селекторов через запятую.
p:not(.intro, blockquote) {

font-weight: bold;

}


Псевдокласс :has
Этот псевдокласс принимает список селекторов в качестве аргумента и CSS-свойства будут применяться, если любой из переданного списка селекторов найдёт подходящий элемент. Лучше посмотреть на примере. Здесь каждому элементу a, который содержит в себе изображение, будет нарисована чёрная рамка:
a:has( > img ) {

border: 1px solid #000;

}
Во втором примере я совмещаю :has и :not и выбираю только те элементы li, которые не содержат элемент p:
li:not(:has(p)) {

padding-bottom: 1em;

}


Псевдокласс совпадения :matches
Этот псевдокласс означает, что мы можем применить правила к группе селекторов, например:
p:matches(.alert, .error, .warn) {

color: red;

}
Чтобы проверить, поддерживает ли ваш браузер эти селекторы, вы можете использовать css4-selectors.com. Там же вы можете узнать больше о новых селекторах.



Режимы наложения в CSS
Если вы знакомы с режимами наложения в фотошопе, тогда, возможно, вас заинтересует спецификация смешивания и наложения. Эта спецификация позволяет нам применять режимы наложения к фонам и любым HTML-элементам прямо в браузере.
В приведённом ниже CSS у меня есть контейнер с фоновым изображением. Добавляя цвет фона и устанавливая background-blend-mode в значения hue и multiply, я могу применить интересный эффект к изображениям.
.box {

background-image: url("balloons.jpg");

}



.box2 {

background-color: red;

background-blend-mode: hue;

}



.box3 {

background-color: blue;

background-blend-mode: multiply;

}

Использование background-blend-mode

Свойство mix-blend-mode позволяет наложить текст поверх изображения. В примере ниже у меня есть заголовок h1 и затем в .box2 я устанавливаю mix-blend-mode: screen.
.box {

background-image: url("balloons-large.jpg");

}



.box h1 {

color: green;

font-size: 140px;

}



.box2 h1 {

mix-blend-mode: screen;

}

Использование mix-blend-mode
Узнайте больше об использовании режимов наложения в статье на CSS Tricks и Dev Opera.



Функция calc
Она даёт возможность выполнять математические вычисления прямо в CSS.
В качестве простого примера можно использовать calc() для расположения фонового изображения относительно нижнего правого угла элемента. Чтобы расположить на расстоянии 30px от верхнего левого угла, вы должны использовать:
.box {

background-image: url("check.png");

background-position: 30px 30px;

}
Однако, вы не сможете этого сделать относительно правого нижнего угла, если не знаете размеров контейнера. Функция calc() означает, что вы можете вычесть 30 пикселей из стопроцентной ширины или высоты:
.box {

background-image: url("check.png");

background-position: calc(100% – 30px) calc(100% – 30px);

}
В современных браузерах calc() хорошо поддерживается, хотя использование для вычисления позиции фона в IE9 приводит к падению браузера.
CSS-хитрости и функция calc() — забавная статья об использовании calc() для решения проблем CSS. Вот несколько простых кейсов на CSS Tricks.



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

--color-main: #333333;

--color-alert: #ffecef;

}



.error {

color: var(--color-alert);

}

Посмотреть больше примеров и узнать подробности вы можете в статье на Mozilla Developer Network.



CSS-исключения
Мы все знакомы с обтеканием в CSS. Самым простым примером может служить обтекание текстом изображения. Но обтекание довольно ограничено, так как плавающий элемент всегда прижимается кверху, и пока мы можем прижимать изображение к левому краю и обтекать его текстом справа и снизу. Не существует способа разместить изображение по центру документа и обтекать его текстом со всех сторон.
Исключения позволяют окружить текстом позиционируемые элементы со всех сторон. Само по себе оно не определяет новый метод позиционирования и может быть использовано только в соединении с другими методами. В приведённом ниже примере я абсолютным позиционированием располагаю элемент, затем определяю его как исключение, задавая свойство wrap-flow и его значение both, после чего текст начинает воспринимать позицию элемента и обтекает его со всех сторон.
.main {

position: relative;

}



.exclusion {

position: absolute;

top: 14em;

left: 14em;

width: 320px;

wrap-flow: both;

}


Поддержка браузерами исключений и wrap-flow: both сейчас ограничена IE10+, требующим префикс -ms. Обратите внимание, что исключения до недавнего времени были связаны со спецификацией CSS-фигур, которую я рассмотрю ниже, так что часть информации может пересекаться.



CSS-фигуры
Спецификация по исключениям рассматривает обтекание текстом вокруг прямоугольных объектов. CSS-фигуры предоставляют нам более мощную возможность такую, как обтекание текстом по кривой.
CSS-фигуры определяются новым свойством shape-outside. Оно может быть использовано на плавающем элементе. В примере ниже я использую shape-outside чтобы изогнуть текст вокруг обтекаемого изображения.
.shape {

width: 300px;

float: left;

shape-outside: circle(50%);

}


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



CSS-сетки
Сетки дают нам метод для создания структуры, которая не отличается от использования таблиц для разметки. Однако, описывая сетки в CSS, а не в HTML, мы можем создавать макеты, которые могут быть изменены при помощи медиа выражений в зависимости от контекста. Это позволяет разделить порядок элементов в коде от их визуального представления. Для дизайнеров это означает, что вы можете свободно изменять позицию элементов на странице для лучшего представления макета на разных контрольных точках, и не нужно идти на компромисс между разумно структурированным документом и вашим адаптивным дизайном. В отличие от макетов, основанных на HTML-таблицах, вы можете наслаивать элементы в сетках. Так что, если потребуется, один элемент может перекрывать другой.
В примере ниже мы объявляем сеткой элемент с классом .wrapper. Он содержит три колонки с шириной в 100px, отступом в 10px между ними и три строки. Мы располагаем контейнеры внутри этой сетки, используя номера линий до и после, выше и ниже той области, где мы хотим расположить элемент.
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Grid Example</title>

<style>

body {

margin: 40px;

}



.wrapper {

display: grid;

grid-template-columns: 100px 10px 100px 10px 100px;

grid-template-rows: auto 10px auto;

background-color: #fff;

color: #444;

}



.box {

background-color: #444;

color: #fff;

border-radius: 5px;

padding: 20px;

font-size: 150%;

}



.a {

grid-column: 1 / 2;

grid-row: 1 / 2;

}



.b {

grid-column: 3 / 4;

grid-row: 1 / 2;

}



.c {

grid-column: 5 / 6;

grid-row: 1 / 2;

}



.d {

grid-column: 1 / 2;

grid-row: 3 / 4;

}



.e {

grid-column: 3 / 4;

grid-row: 3 / 4;

}



.f {

grid-column: 5 / 6;

grid-row: 3 / 4;

}

</style>

</head>

<body>

<div class="wrapper">

<div class="box a">A</div>

<div class="box b">B</div>

<div class="box c">C</div>

<div class="box d">D</div>

<div class="box e">E</div>

<div class="box f">F</div>

</div>

</body>

</html>