Можно ли применить стили к родительскому тегу, основываясь на свойствах вложенного тега?

Здравствуйте! 
 
У меня есть следующий HTML-код: 
 
<pre><code class="html">№1---
&lt;p&gt;&lt;strong&gt;текст&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;текст текст текст&lt;/p&gt;

№2---
&lt;p&gt;текст&lt;/p&gt;
&lt;p&gt;текст текст текст&lt;/p&gt;</code></pre> 
 
В случае, если внутри тега <code>&lt;p&gt;</code> находится тег <code>&lt;strong&gt;</code>, необходимо применить стили к следующему тегу <code>&lt;p&gt;</code>. Эти стили должны действовать только на первый вариант и не затрагивать второй. Возможно ли решить эту задачу с помощью CSS, или для этого потребуется JavaScript?
  • 18 декабря 2024 г. 9:13
Ответы на вопрос 2
К сожалению, чистый CSS не позволяет применять стили к родительскому элементу или к следующему элементу на основе наличия вложенного элемента. CSS работает с селекторами, которые ориентированы на иерархию и взаимосвязь между родительскими и дочерними элементами, но не предоставляет способа "обратного" селектирования (например, применять стиль к следующему элементу на основе наличия вложенного элемента).

В вашем случае, чтобы применить стили к следующему тегу `<p>` только в том случае, если предыдущий тег `<p>` содержит тег `<strong>`, вам потребуется использовать JavaScript. Вот пример, как это можно сделать:

```html
<p><strong>текст</strong></p>
<p>текст текст текст</p>

<p>текст</p>
<p>текст текст текст</p>

<script>
  const paragraphs = document.querySelectorAll('p');

  for (let i = 0; i < paragraphs.length - 1; i++) {
    if (paragraphs[i].querySelector('strong')) {
      paragraphs[i + 1].style.color = 'red'; // Пример применения стиля
    }
  }
</script>
```

В этом коде мы выбираем все теги `<p>`, проверяем, содержит ли текущий `<p>` элемент тег `<strong>`, и если да, применяем стиль к следующему тегу `<p>`. В данном примере мы изменяем цвет текста на красный, но вы можете изменить его на любой другой стиль по вашему усмотрению.
с современным CSS легко <br/> <code class="css">p:has(strong) + p { /* ... */ }</code>
Похожие вопросы