@weranda

Можно ли задать стиль первому абзацу после заголовка, если абзацев два?

Приветствую.
Можно ли обойтись без JS в таком примере: если после заголовка идет два и более абзаца, то первому абзацу задать стиль; если после заголовка абзац один, то стили к первому абзацу не применять.
<h2>Заголовок</h2>
<p>Абзац</p> <!-- тут будет стиль -->
<p>Абзац</p>
<p>Абзац</p>

<h2>Заголовок</h2>
<p>Абзац</p> <!-- тут будет стиль -->
<p>Абзац</p>

<h2>Заголовок</h2>
<p>Абзац</p> <!-- тут не будет стиля -->
  • Вопрос задан
  • 124 просмотра
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 3
l3ftoverz
@l3ftoverz Куратор тега CSS
Люблю Финский металкор
verkhoturov
@verkhoturov
HTML-Верстальщик / Frontend
Попробуй вот так -

<style>
.text-block p:first-of-type{
  color: red;
}

.text-block p:only-of-type{
  color: black;
}
</style>

<!DOCTYPE html>
<html lang="ru">
  <head> </head>
  <body>
    <div class="text-block">
      <h2>Заголовок</h2>
      <p>Абзац</p>
      <p>Абзац</p>
      <p>Абзац</p>
    </div>

    <div class="text-block">
      <h2>Заголовок</h2>
      <p>Абзац</p>
      <p>Абзац</p>
    </div>

    <div class="text-block">
      <h2>Заголовок</h2>
      <p>Абзац</p>
    </div>
  </body>
</html>
Ответ написан
anatoly_kulikov
@anatoly_kulikov
Помог ответ? Отметь решением!
Пример в песочнице: https://jsfiddle.net/anatolykulikov/ek7gcxdL/6/
Для начала нужно сделать родительские блоки:
<section>
<h2>Заголовок</h2>
<p>Абзац</p> <!-- тут будет стиль -->
<p>Абзац</p>
<p>Абзац</p>
</section>

<section>
<h2>Заголовок</h2>
<p>Абзац</p> <!-- тут будет стиль -->
<p>Абзац</p>
</section>

<section>
<h2>Заголовок</h2>
<p>Абзац</p> <!-- тут не будет стиля -->
</section>

Стили вот такие
section {
  display: block;
  width: 50%;
  margin: 0 auto 20px;
  
  p:first-of-type:not(:only-of-type) {
    color: red;
  } 
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы