Бесплатный курс по Java: от основ до продвинутого уровня
Cелекторы в CSS
До этого мы использовали только селектор конкретного тега ( например h1 {…} ) и селектор класса ( например some-class-name {…} ).
Селектор – это то, что мы пишем перед фигурными скобочками. Если чуть сложнее, то селектор – это шаблон по которому происходит привязка набора свойств к элементу на странице.
Очень важно рассмотреть некоторые другие селекторы помимо тех двух, что мы уже рассмотрели. Если не знать их, то можно насоздавать очень много лишних классов, а много лишнего кода – это всегда плохо. С помощью них можно выбирать потомков какого-либо html элемента по какому-либо признаку и присвоить им определенные свойства.
/*На странице у нас будет два div блока.
Создадим и применим к ним два разных класса
чтобы продемонстрировать работу
и пользу селекторов*/
.divblock1 {
width:410px;
height:360px;
background:#f1f1f1;
float:left;
margin: 0 15px 15px 0;
text-align: center;
padding: 5px 15px 15px 5px;
box-shadow: 5px 10px #888888;
}
.divblock2 {
width:410px;
height:360px;
background:#f1f1f1;
float:left;
margin: 0 15px 15px 0;
text-align: center;
padding: 5px 15px 15px 5px;
box-shadow: 5px 10px #888888;
}
/* Ниже конекстный селектор. Здесь два html
тега или класса (или и то и другое как в данном
случае) пишутся через пробел.
Здесь второй html тег это дочерний элемент
первого. То есть если где-то на странице есть
например div блоки к которым применен
класс .divblock1 и в которых есть li теги то ко
всем li тегам в этих div применяются свойства.
Здесь у всех li в div с классом divblock1
меняется цвет текста с помощью color. */
.divblock1 li {
color:blue;
}
/*ниже из прошлых уроков*/
.header {
padding: 10px;
background:#aaf6a1;
}
.nav {
margin: 10px;
padding: 10px;
background:#f1f1a1;
}
.mainSection {
float: left;
width: 75%;
height:600px;
background:#b99999;
}
.aside {
float: left;
width: 25%;
height:600px;
background:#c1fee1;
}
.footer {
clear: both;
background:#d11777;
}
.header {
padding: 10px;
background:#aaf6a1;
}
.nav {
margin: 10px;
padding: 10px;
background:#f1f1a1;
}
.section {
float: left;
width: 75%;
height:600px;
background:#b99999;
}
.aside {
float: left;
width: 25%;
height:600px;
background:#c1fee1;
}
.footer {
clear: both;
background:#d11777;
}
.divblock {
width:410px;
height:300px;
background:#f1f1f1;
float:left;
margin: 0 15px 15px 0;
text-align: center;
padding: 5px 15px 15px 5px;
box-shadow: 5px 10px #888888;
}
.imagePropsClass {
width: 400px;
height: 170px;
}
h1, h2 {
font-weight: 600;
font-family:’Brush Script MT’,cursive;
}
h3 {
font-weight: 600;
font-family: ‘Courier New’, monospace;
}
img {
border-style: dashed;
border-color: red;
border-radius: 15px;
}
Вот и сама страница с div-ами к которым будут применены классы divblock1 и divblock2. К списку в блоке класса divblock1 будет применен контекстный селектор.
Page tab text
Патрик учит div и CSS
List Item 1
List Item 2
List Item 3
Какой-то текст в теге p. Какой-то текст в теге p.
Какой-то текст в теге p. Какой-то текст в теге p.
Какой-то текст в теге p. Какой-то текст в теге p.
Какой-то текст в теге p.
Патрик учит div и CSS
List Item
List Item
List Item
Какой-то текст в теге p. Какой-то текст в теге p.
Какой-то текст в теге p. Какой-то текст в теге p.
Какой-то текст в теге p. Какой-то текст в теге p.
Какой-то текст в теге p.
Если открыть страницу, то можно увидеть, что все li в div с классом divblock1 окрасились в синий.
То есть контекстный селектор сработал.
Если бы мы не знали о контекстном селекторе, то не очень понятно как бы можно было бы применить какие-то свойства к li только в блоке класса divblock1, то есть, чтобы, например, элементов li в блоке класса divblock2 это не касалось.
Разве что создать отдельный класс для этих li и ко всем ним применить эти свойства через него, что ясное дело очень плохое решение по сравнению с этим.
Также обратите внимание, что li не прямой потомок div, a li прямой потомок ul.
То есть контекстный селектор работает для любых потомков прямых или не прямых.
Это пожалуй самый часто используемый селектор помимо двух ранее рассмотренных простейших селекторов.
Селектор дочерних элементов
В отличие от предыдущего контекстного селектора селектор ">" выбирает только прямых потомков html элемента.
Контекстный селектор выбирал вообще все li, которые есть в блоке div класса divblock1 и применял к ним синий цвет. Этот же селектор применяет свойства только к ПРЯМОМУ потомку html элемента.
/*На странице у нас будет два div блока.
создадим и применим к ним два разных класса
чтобы продемонстрировать работу
и пользу селекторов*/
.divblock1 {
width:410px;
height:430px;
background:#f1f1f1;
float:left;
margin: 0 15px 15px 0;
text-align: center;
padding: 5px 15px 15px 5px;
box-shadow: 5px 10px #888888;
}
.divblock2 {
width:410px;
height:430px;
background:#f1f1f1;
float:left;
margin: 0 15px 15px 0;
text-align: center;
padding: 5px 15px 15px 5px;
box-shadow: 5px 10px #888888;
}
/* Очевидно что li в любом случае не может быть прямым потомком div блока, поскольку
li очевидно всегда является прямым потомком только тега ul.
Поэтому не получится окрасить
в синий цвет li сделав например так
.divblock1 > li {
color:blue;
}
поскольку li не прямой потомок .divblock1.
Вместо этого нужно указывать цепочку прямых
потомков чтобы добраться к li вот так:
*/
.divblock1 > ul > li {
color:blue;
}
/*Селектор выше применяет синий цвет ко всем li,
которые являются прямыми потомками ul, при этом ul должен
являться прямым потомком .divblock1.*/
/*ниже из прошлых уроков*/
.header {
padding: 10px;
background:#aaf6a1;
}
.nav {
margin: 10px;
padding: 10px;
background:#f1f1a1;
}
.mainSection {
float: left;
width: 75%;
height:600px;
background:#b99999;
}
.aside {
float: left;
width: 25%;
height:600px;
background:#c1fee1;
}
.footer {
clear: both;
background:#d11777;
}
.header {
padding: 10px;
background:#aaf6a1;
}
.nav {
margin: 10px;
padding: 10px;
background:#f1f1a1;
}
.section {
float: left;
width: 75%;
height:600px;
background:#b99999;
}
.aside {
float: left;
width: 25%;
height:600px;
background:#c1fee1;
}
.footer {
clear: both;
background:#d11777;
}
.divblock {
width:410px;
height:300px;
background:#f1f1f1;
float:left;
margin: 0 15px 15px 0;
text-align: center;
padding: 5px 15px 15px 5px;
box-shadow: 5px 10px #888888;
}
.imagePropsClass {
width: 400px;
height: 170px;
}
h1, h2 {
font-weight: 600;
font-family:’Brush Script MT’,cursive;
}
h3 {
font-weight: 600;
font-family: ‘Courier New’, monospace;
}
img {
border-style: dashed;
border-color: red;
border-radius: 15px;
}
Добавим еще один ul обернутый в чистый div блок в div блок класса divblock1.
Page tab text
Патрик учит div и CSS
List Item
List Item
List Item
List Item
List Item
List Item
Какой-то текст в теге p. Какой-то текст в теге p.
Какой-то текст в теге p. Какой-то текст в теге p.
Какой-то текст в теге p. Какой-то текст в теге p.
Патрик учит div и CSS
List Item
List Item
List Item
List Item
List Item
List Item
Какой-то текст в теге p. Какой-то текст в теге p.
Какой-то текст в теге p. Какой-то текст в теге p.
Какой-то текст в теге p. Какой-то текст в теге p.
Если откроем страницу, то можем увидеть что дочерний селектор > сработал и все прямые li потомки элемента ul, которые являются прямыми потомками блока с классом divblock1 окрасились в синий.
В отличие от предыдущего контекстного селектора этот исключает часть элементов внутри divblock1, к которым применяются свойства.
То есть синий цвет применился ко всем li, которые являются конечным элементом цепочки .divblock1 > ul > li, но он не был применен к li, которые являются конечным элементом .divblock1 > div > ul > li, поскольку такой цепочки в css файле мы не определяли.
Псевдокласс отрицания
С помощью псевдокласса отрицания not можно отключить применение свойств селектора к конкретным html элементам.
/*На странице у нас будет два div блока.
Создадим и применим к ним два разных класса,
чтобы продемонстрировать работу
и пользу селекторов*/
.divblock1{
width:490px;
height:925px;
background:#f1f1f1;
float:left;
margin: 0 15px 15px 0;
text-align: center;
padding: 5px 15px 15px 5px;
box-shadow: 5px 10px 5px #888888;
}
.divblock2{
width:490px;
height:930px;
background:#f1f1f1;
float:left;
margin: 0 15px 15px 0;
text-align: center;
padding: 5px 15px 15px 5px;
box-shadow: 5px 10px 5px #888888;
}
/*В данном случае с помощью not можно
сделать так чтобы свойства применялись
ко всем дочерним img блока div
с классом divblock1 КРОМЕ тех img которые
с классом imagePropsClass.*/
.divblock1 img:not(.imagePropsClass){
border: 1.5px solid #d7d7d7;
}
/*ниже из прошлых уроков*/
.header {
padding: 10px;
background:#aaf6a1;
}
.nav {
margin: 10px;
padding: 10px;
background:#f1f1a1;
}
.mainSection {
float: left;
width: 75%;
height:600px;
background:#b99999;
}
.aside {
float: left;
width: 25%;
height:600px;
background:#c1fee1;
}
.footer {
clear: both;
background:#d11777;
}
.header {
padding: 10px;
background:#aaf6a1;
}
.nav {
margin: 10px;
padding: 10px;
background:#f1f1a1;
}
.section {
float: left;
width: 75%;
height:600px;
background:#b99999;
}
.aside {
float: left;
width: 25%;
height:600px;
background:#c1fee1;
}
.footer {
clear: both;
background:#d11777;
}
.divblock {
width:410px;
height:300px;
background:#f1f1f1;
float:left;
margin: 0 15px 15px 0;
text-align: center;
padding: 5px 15px 15px 5px;
box-shadow: 5px 10px #888888;
}
.imagePropsClass {
width: 400px;
height: 170px;
}
h1, h2 {
font-weight: 600;
font-family:’Brush Script MT’,cursive;
}
h3 {
font-weight: 600;
font-family: ‘Courier New’, monospace;
}
img {
border-style: dashed;
border-color: red;
border-radius: 15px;
}
Добавим пару картинок в div-ы. Как видим никаких классов к этим картинкам не применено.
Page tab text
Патрик учит div и CSS
List Item
List Item
List Item
List Item
List Item
List Item
List Item
List Item
Какой-то текст в теге p.Какой-то текст в теге p.Какой-то текст в теге p.
Какой-то текст в теге p.Какой-то текст в теге p.Какой-то текст в теге p.
Какой-то текст в теге p.Какой-то текст в теге p.
Патрик учит div и CSS
List Item
List Item
List Item
List Item
List Item
List Item
List Item
List Item
Какой-то текст в теге p.Какой-то текст в теге p.Какой-то текст в теге p.
Какой-то текст в теге p.Какой-то текст в теге p.Какой-то текст в теге p.
Какой-то текст в теге p.Какой-то текст в теге p.
Если откроем страницу, то можем увидеть, что свойства селектора (рамка фиолетового цвета) были применены ко всем картинкам div блока с классом divblock1 кроме картинки с классом imagePropsClass
То есть с помощью not мы исключили некоторые img из тех, к которым будут применяться свойства.
Также есть и другие селекторы, но здесь мы привели примеры наиболее полезных и часто используемых.
Руководство по JUnit тестированию в Java: создание тестовых классов, использование assertEquals, assertTrue и других методов для проверки корректности работы кода.
Time to read: 17
Аннотации в JUnit тестах
Изучите основные аннотации JUnit: @Test, @Ignore, @Before, @After. Узнайте, как тестировать производительность методов и управлять выполнением тестов в Java.
Time to read: 18
Тестирование с Mockito
Mockito для тестирования Java-кода: mock и spy объекты, подмена зависимостей (stub), примеры тестирования методов с имитацией работы БД.
