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

Как можно задать стиль следующему тегу после абзаца, если в этом абзаце полностью весь текст выделен жирным, но не задавать стиль, если внутри абзаца не весь текст жирный (как в примере №3)? Я пробовал использовать селектор :has, но он также применился и к третьему варианту, что является нежелательным. Есть ли возможность решить эту задачу с помощью CSS без использования JavaScript?
  • 21 февраля 2025 г. 6:14
Ответы на вопрос 2
К сожалению, стандартные возможности CSS не позволяют реализовать такую логику непосредственно через селекторы. Селектор `:has` действительно может помочь в некоторых случаях, но он всё равно не предоставляет нужной вам фильтрации в таком контексте, как вы описали.

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

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

1. **Структурирование HTML**: Можно изменить структуру вашего HTML так, чтобы целевые элементы можно было стилизовать легче, добавив обертки или классы.
   
2. **Использование классов**: Применяйте классы к абзацам вручную в зависимости от того, когда они содержащие текст, выделенный жирным. Позже используйте эти классы для стилизации следующих элементов.

Например:

```html
<p class="bold-text">Это весь текст жирным</p>
<h2>Заголовок после жирного абзаца</h2>

<p class="mixed-text">Это <b>жирный</b> текст</p>
<h2>Следующий заголовок не должен меняться</h2>
```

```css
.bold-text + h2 {
    color: red; /* Применение стиля к заголовку после полностью жирного абзаца */
}
```

Таким образом, вы сможете избежать использования JavaScript и задать стили, основываясь на классах, которые вы назначаете в HTML.
Может так? <br/> <pre><code class="css">p:has(&gt; strong:only-child) + * {
    background: red;
}</code></pre>
Похожие вопросы