Зачастую необходимо сменить оформление вложенных элементов. Нет нужды создавать еще один класс для этого.
Можно установить оформление вложенного блока как показано ниже:
В CSS вложенность указывается через пробел и символ >
Разница в том, что при использовании .a > div браузер применит свойства только на блоки div, которые непосредственно находятся в элементе .a
В то время как .a div применит указанное свойство ко всем div находящимся в .a, а также к div в его потомках.
Например:
Но что, если указать в HTML класс через пробел?
Этому блоку будут присвоены оба класса "class1" и "class2".
Поэтому можно присвоить свойства как первым, так и вторым классом.
Также возможно создавать динамическую смену изображений, фона, цвета и т.д при наведении на родительский элемент.
Это можно сделать с помощью записи через селекторы вложенности и псевдокласса :hover (для предка)
Спасибо за внимание.
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> |
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> |
1 | <div class="class1 class2"></div> |
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;} |
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> |
Спасибо за внимание.