Как выбрать селектор, когда класс не существует

#html #css

#HTML #css

Вопрос:

У меня есть сомнения по поводу «родственных селекторов» для CSS.

Это ситуация:

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

 <!-- USA page -->
<div class="body">
  <div class="header">HEADER</div> <!-- it exists -->
  <div class="wrapper">BODY</div>
</div>

<hr>

<!-- Canada page --> <!-- does not have header -->
<div class="body">
  <div class="wrapper">BODY</div> <!-- I want to modify this wrapper -->
</div>

Я не уверен, возможно ли это, потому что я не могу создать новый стиль для <div class="wrapper">BODY</div> только для Канады, потому что это один шаблон для всех стран.

это шаблон twig

 <div class="body">
  {% if show-header %} <!-- if true show -->
    <div class="header">HEADER</div>
  {% endif %}
  <div class="wrapper">BODY</div>
</div>

итак … мне нужно чисто CSS-решение… Как я могу подать заявку на определенный стиль, <div class="wrapper">BODY</div> если <div class="header">HEADER</div> он не существует в Канаде. допустим, чтобы изменить цвет BODY , но не для США.

Я думал, что с помощью селектора к псевдоклассу:not() вот так:

 :not(.printable) {
    /* Styles */
}

но каков подход?

1. Я не понимаю, в чем собственно проблема.

2. Вам придется подробнее остановиться на изменениях, которые вы пытаетесь внести. Какого результата вы ожидаете?

3. Вы хотите иметь «Дополнительный» заголовок? Значит, заголовок все еще есть, но он отличается от разрешенных стран?

Ответ №1:

Я не профессионал в twig, но вы можете поиграть с условными классами:

 <div class="body">
  {% if show-header %} <!-- if true show -->
    <div class="header">HEADER</div>
  {% endif %}
  <div class="{{ country == 'Canada' ? 'wrapper-canada' : 'wrapper-usa' }}">BODY</div>
</div>

Или даже используйте функцию, где вы определите страну и вернете соответствующее имя класса.

Ответ №2:

Если я понимаю ваш вопрос, у вас все равно будет работать селектор родственного типа. Ваш родственный селектор (наличие .header ) будет переопределяться.

Итак, что-то вроде этого:

 .body .wrapper {
  color: red; // Default color
}
.body .header   .wrapper {
color: blue; // Override default color when sibling exists
}

JSFiddle:https://jsfiddle.net/fch3drve /