Применить стиль CSS к подменю

Question

Я изменяю фон избранного заголовка для всех моих категорий продуктов на моем сайте Wordpress с CSS. Я хочу, чтобы стиль применялся ко всем подкатегориям из родительской категории.

Например, у меня есть категория "Candy", которая получает это изображение заголовка:

  .term-candy .shop-page-title.category-page-title.dark.featured-title.page-title{
    background-image: url(PICTURE-URL.png);
    background-repeat: no-repeat;
    background-size: cover;
}

Я хочу то же самое Стиль, который будет применяться ко всем дочерним категориям «Конфеты». Например, одна из дочерних категорий «Candy» - «Gummies». Я пытался добавить .term-gummies к CSS, но я не думаю, что это правильно:

  .term-candy .term-gummies .shop-page-title.category-page-title.dark.featured-title.page-title{
    background-image: url(PICTURE-URL.png);
    background-repeat: no-repeat;
    background-size: cover;
}

У меня есть более 5 подкатегорий в каждой категории, поэтому пишу связку CSS для каждой подкатегории все будет слишком загромождено.

Answer 1

Если вы хотите, чтобы каждый элемент, имеющий класс ".term-gummies", имел тот же стиль, что и ваш ".term-candy .shop-page-title.category-page-title.dark.featured-title.page -title », чем вы не должны добавлять« term-gummies »к этому пути CSS.

Вам необходимо создать собственную запись в стиле CSS для этого класса, например:

.term-gummies .shop-page-title.category-page-title.dark.featured-title.page-title {
    background-image: url(PICTURE-URL.png);
    background-repeat: no-repeat;
    background-size: cover;
}

Вы можете избежать дублирования, добавив к одному выражению больше CSS путей, например:

.term-candy .shop-page-title.category-page-title.dark.featured-title.page-title, 
.term-gummies .shop-page-title.category-page-title.dark.featured-title.page-title {
    background-image: url(PICTURE-URL.png);
    background-repeat: no-repeat;
    background-size: cover;
}