Если определенная комбинация классов CSS присутствует, измените CSS другого класса - PullRequest
Новая
       4

Если определенная комбинация классов CSS присутствует, измените CSS другого класса

0 голосов
/ 03 июля 2018

Я также хочу изменить цвет фона «три» на «светло-голубой», но только если на странице существует комбинация классов «один ток». Примечание: «три» не могут получить дополнительный класс. Я знаю, вы можете сделать это с помощью JavaScript, но есть ли собственное решение CSS?

Вот мой пример: 

<!DOCTYPE html>
<html>
<head>
  <style> 
    .one.current {background-color: lightblue;}
  </style>
</head>
<body>
 <header>
  <p class="one current">The first paragraph.</p>
 </header>

 <main>
  <p class="two">The second paragraph.</p>
  <p class="three">The third paragraph.</p>
  <p class="four">The fourth paragraph.</p>
 </main>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Если вы можете установить класс для элемента header вместо p элемента внутри него, вы можете обратиться к абзацу внутри элемента-брата, используя следующую комбинацию селекторов: 

<!DOCTYPE html>
<html>
<head>
  <style> 
    .one.current p {background-color: lightblue;}
    .one.current + main > .three {background-color: lightblue;}
  </style>
</head>
<body>
 <header class="one current">
  <p>The first paragraph.</p>
 </header>

 <main>
  <p class="two">The second paragraph.</p>
  <p class="three">The third paragraph.</p>
  <p class="four">The fourth paragraph.</p>
 </main>
</body>
</html>
0 голосов
/ 03 июля 2018

В вашем случае вы можете использовать .one.current в <header>

Тогда стиль .three с: .one.current ~ main .three

И элемент <p> внутри заголовка с: .one.current p

Документация об операторе ~: общий селектор брата (MDN) .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...