MYSQL
PHP
HTML
CSS
JS

Применение свойств CSS к вложенным элементам

Зачастую необходимо сменить оформление вложенных элементов. Нет нужды создавать еще один класс для этого. Можно установить оформление вложенного блока как показано ниже:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="a">
  <div>
  </div>
</div>
<style>
  .a div{
        font-size: 14px;
  }
 
  .a > div{
        color: #f00;
  }
</style>
В CSS вложенность указывается через пробел и символ > Разница в том, что при использовании .a > div браузер применит свойства только на блоки div, которые непосредственно находятся в элементе .a В то время как .a div применит указанное свойство ко всем div находящимся в .a, а также к div в его потомках. Например:
?
1
2
3
4
5
6
7
8
9
10
<div class="a">
  <div class="b">
      <div class="c"></div>
  </div>
</div>
<style>
  .a > .b { /* Применится к .b */ }
  .a .c { /* Применится к .c (через "посредника" .b) */ }
  .a > .c { /* Ни к чему не применится, т.к. в .a нет блоков .c, только .b */ }
</style>
Но что, если указать в HTML класс через пробел?
?
1
<div class="class1 class2"></div>
Этому блоку будут присвоены оба класса "class1" и "class2". Поэтому можно присвоить свойства как первым, так и вторым классом.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* Для такой записи класса применится такое описание: */
.class1 {
  background: #eee;
}
 
/* Такое тоже применится */
.class2 {
 color: #f00;
}
 
/* Но это уже не применится */
/* будет искать .class2 вложенным блоком в .class1 */
.class1 .class2 {
  font-size: 20pt;
}
 
 /* Зато это применится */
.class1.class2 {
  font-size: 16px;
}
Также возможно создавать динамическую смену изображений, фона, цвета и т.д при наведении на родительский элемент. Это можно сделать с помощью записи через селекторы вложенности и псевдокласса :hover (для предка)
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="menu">
  <div class="button"><img class="icon"/>...</div>
  <div class="button"><img class="icon"/>...</div>
</div>
<style>
    .button .icon {
        background: url(/images/default.png);
    }
 
    .button:hover .icon {
        background: url(/images/hover.png);
    }
</style>

Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru

Случайные уроки по этой теме:

Селекторы CSS Плавное изменение цвета, позиции элементов в CSS. transition Оформление ссылок Как изменить фон элемента. Все о Background Оформление блока. Div + class
↑