Что не так при обращении к элементу так?

Question

[poylar123]

.services-container:first-child .services-block:first-of-type  {}

Это не работает, но как мне обратится к первому .services-container из всех и к первому .services-block в этом контейнере?
Пример
https://codepen.io/poylar/pen/OJLXmpM?editors=1010

Comments

[Dima Polos]

.services-container:first-child, .services-container:first-child .services-block:first-of-type

или

.services-container:first-child, .services-container:first-child .services-block:first-child

Если правильно понял вопрос.

[poylar123]

Dima Polos, И чем это отличается от моего примера?

[Dima Polos]

poylar123, посмотрите внимательно, отличается ведь Вы пробовали? Не работает?

[poylar123]

Dima Polos, я не понимаю почему это должно работать, но я попробовал и это не работает.
ваша запись аналогична

services-container:first-child
 {}

.services-container:first-child .services-block:first-of-type {}

[Dima Polos]

poylar123, значит я Вас не понял, потому пишу в комментарии. Теперь добавили картинки и стало понятно.

[profesor08]

Не плохо бы обернуть эти контейнеры в блок, и проблема отпадет сама собой.

Answer 1

[Flying]

Причина вашей проблемы в непонимании того как работает псевдо-класс :first-of-type. На Stack Overflow есть пара очень хороших объяснений этого, стоит ознакомиться (раз, два).

Ключевым моментом для понимания должен стать тот факт что в контексте HTML понятие "element type" эквивалентно имени тега. Таким образом ваше ожидание что .services-block:first-of-type означает "первый элемент с классом services-block" ложно и это приводит к неработающему селектору. В реальности этот селектор читается как "любой подэлемент текущего элемента, имеющий класс services-block и при этом являющийся первым элементом с таким именем тега среди всех имеющихся". Слегка контр-интуитивно, да, но уж как есть.

Вашу задачу можно решить если вы вспомните что div - не единственный элемент в HTML и начнёте использовать также и другие элементы. В вашем примере для div.basic-title и div.services-block_title явно лучше подходят какие-то из элементов заголовка, а структура из div.services-block_item и подэлементов - это явно dl/dt/dtt

Простая замена заголовка на какой-либо Hx элемент позволит использовать селектор

.container > div.services-container:first-of-type > .services-block:first-child

.

Также можно ничего не менять, тогда селектор получится несколько более жёстким:

.container > .basic-title + .services-container > .services-block:first-child

Comments

[poylar123]

Спасибо большое, что объяснили. Все получилось.