Чем селектор «.class ol» отличается от «ol.class»?

Question

[Алексей]

Чем отличается запись .class ol {}от ol.class {}?

Answer 1

[Алексей Уколов]

.foo ol {}

<div class="foo">
  <ol>
    <li>...</li>
  </ol>
</div>

ol.foo {}

<div>
  <ol class="foo">
    <li>...</li>
  </ol>
</div>

Наглядно: https://codepen.io/alexey-m-ukolov/pen/bYoYNg

В одном случае класс .foo назначен одному элементу, в другом другому.
В первом случае вы указываете css-правила элементам <ol>, находящимся внутри элементов с классом .foo, а в другом элементам <ol> в то же время имеющим класс .foo.

Вам нужно прочитать любой учебник по CSS - там всё это (и не только) описано в первых главах.

Comments

[Алексей]

ничего не понял, в итоге в чем разница?

[Алексей Уколов]

Я добавил наглядные примеры разметки. Случайно отправил ответ до того, как дописал.

[Алексей]

Алексей Уколов, а в чем разница между ними?

[Максим]

Алексей selftrips.ru, разница в том что в первом случае ol находится внутри блока с классом class а во втором что что ol имеет класс class и может быть вызван не зависимо находится он внутри или стоит отдельно

[Алексей Уколов]

В одном случае класс .class назначен одному элементу, в другом другому. В первом случае вы указываете css-правила элементу ol, находящемуся внутри элемента .class, а в другом элементу ol в то же время имеющему класс .class.
Вам нужно прочитать любой учебник по CSS - там всё это (и не только) описано в первых главах.

[Сергей Мелодин]

Алексей selftrips.ru, вам бы почитать про вложенные и дочерние селекторы...

[Алексей]

Алексей Уколов, в голове что никак не может уложиться в чем разница
задано фоновое изображение

.entry ul li {
    background-image: xxx
}

как его отменить для отдельного списка, если

You can put the classes into your own style sheet and use further declarations to target elements within the div.

For Content:(uses

1. ,Does not use an H tag for title)
   .mwm-aal-container{}
   .mwm-aal-container-title{}

[Алексей Уколов]

Задайте списку класс (например, .foo) и добавьте следующее правило:

.entry ul.foo li {
    background-image: yyy;
}

Ещё раз - прочитайте любой учебник, там всё написано.

Answer 2

[Дмитрий]

В первом случае стили применятся ко всем ol внутри родительского элемента с классом .class

Во втором к элементу ol с классом .class

Comments

[Алексей]

то ли я уже начитался, то ли действительно самое понятное объяснение

Answer 3

[Максим]

ну к примеру есть некий блок .class и внутри его его список ol то его как раз и стилизуете в css так : .class ol{/* parametrs */}
или отдельно ol.class а его стилизуете так : ol.class{/* parametrs */}
для примера : https://codepen.io/MaximLensky/pen/eeGGqr