Как выбрать дочерние элементы с общим базовым классом и дополнительным классом? - PullRequest
Новая
       15

Как выбрать дочерние элементы с общим базовым классом и дополнительным классом?

0 голосов
/ 11 марта 2019

У меня есть код, подобный следующему: 

.banner.customer-service {
    height: calc(70vh - 85px - 8em);
    background:url(//careers.jobvite.com/marinecreditunion/images/customerservice.jpg) center center / cover no-repeat;
}
.banner.customer-service span {
    background:rgba(0,0,0,0.5);
}
.banner.early-talent {
    height: calc(70vh - 85px - 8em);
    background:url(//careers.jobvite.com/marinecreditunion/images/earlytalent.jpg) center center / cover no-repeat;
}
.banner.early-talent span {
    background:rgba(0,0,0,0.5);
}
<div class="banner"><p>Header</p></div>
<div class="banner customer-service"><p>Specific Header</p></div>
<div class="banner early-talent"><p>Other Specific Header</p></div>

У меня 12 классов, похожих на .banner.specific-class.Я надеюсь сделать что-то вроде этого: 

.banner.* > p {} /* stuff to apply to the p tag */

Я НЕ хочу, чтобы стиль применялся к элементам с just .banner;Я только хочу применить стили к элементам с .banner и вторым классом.

Моя цель - применить стилизацию ТОЛЬКО к элементам, которые имеют .banner.other-class p, а не основание .banner p.

Есть ли способ сделать это без написания отдельных стилей CSS для каждого из 12 классов?

Ответы [ 3 ]

2 голосов
/ 11 марта 2019

Если у всех ваших дополнительных 12 классов есть дефис, вы можете настроить таргетинг на них с помощью селектора атрибутов *1002* для класса .banner, например: 

.banner[class*="-"] p

Demo: 

.banner[class*="-"] p {
    color: red;
}
<div class="banner"><p>Unstyled Header</p></div>
<div class="banner customer-service"><p>Styled Header</p></div>
<div class="banner"><p>Unstyled Header</p></div>
<div class="banner early-talent"><p>Other Styled Header</p></div>
<div class="banner"><p>Unstyled Header</p></div>
<div class="banner other-class"><p>Another Styled Header</p></div>
<div class="banner"><p>Unstyled Header</p></div>
<div class="banner another-class"><p>One More Styled Header</p></div>
<div class="banner"><p>Unstyled Header</p></div>

Вы также можете использовать .banner[class*=" "] p, но это технически "не получится" и применимо к любым ситуациям, в которых у вас есть class="banner " (например, начальный * 1017).* класс, за которым следует пробел) ... в случае, если вы можете динамически добавлять или удалять классы с помощью JavaScript, PHP или чего-то еще.

Если между 12 классами нет общего символа, вам может потребоваться использовать JavaScriptчтобы выбрать их, или применить третий класс к элементам, которые имеют по крайней мере .banner и еще один класс, и просто выбрать по этому классу.Перестройка HTML может быть лучшим решением, так что вы можете сделать свой CSS простым.

2 голосов
/ 11 марта 2019

Вы можете думать об этом по-разному и нацеливаться на все элементы, а затем сбросить стиль, в котором присутствует только класс banner, но вам нужно обратить внимание на пробелы в атрибуте класса: 

.banner {
  color:red;
}

[class="banner"] {
  color:blue;
}
<div class="banner"><p>Header</p></div>
<div class="banner customer-service"><p>Specific Header</p></div>
<div class="banner early-talent"><p>Other Specific Header</p></div>


<div class="banner "><p>I will be red!!!</p></div>

Чтобы избежать проблемы с пробелами, вы можете рассмотреть некоторые JS и использовать функцию trim().Вот еще один ответ, где я использовал тот же трюк: https://stackoverflow.com/a/52557233/8620333

Вы также можете комбинировать это с :not()

.banner:not([class="banner"]) {
  color:red;
}
<div class="banner"><p>Header</p></div>
<div class="banner customer-service"><p>Specific Header</p></div>
<div class="banner early-talent"><p>Other Specific Header</p></div>


<div class="banner "><p>I will be red!!!</p></div>
2 голосов
/ 11 марта 2019

Вы можете использовать .banner > p {} или .banner p {}, если ваши абзацы не обязательно являются прямыми дочерними элементами.

РЕДАКТИРОВАТЬ

Моя цель - применить ТОЛЬКО к стилям, имеющим элементы.banner.other-class p, а не базовый .banner p.

Есть ли способ сделать это без написания отдельных стилей CSS для каждого из 12 классов?

Вы можетеопределите свои правила для пользовательского класса, например: 

.banner.my-custom-class p {
    /*Your rules*/
}

, и затем вы можете убедиться, что добавили этот класс в баннер.Другой возможностью является создание класса, который не должен применяться, например: 

.banner:not(.my-other-custom-class) p {
    /*Your rules*/
}

, и затем вы можете добавить этот класс в теги, где вы не хотите, чтобы ваши стили применялись.Если вам нужны дополнительные настройки, вы можете рассмотреть возможность настройки с помощью Javascript или предоставления нам дополнительной информации о ваших классах.Конечно, самое простое - создать правила для каждого класса, например 

.banner.myclass1 p, .banner.myclass2 p, banner.myclass3 p {
    /*Your rules*/
}
...