Задать вопрос
weranda
@weranda
css

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

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

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

<h2>Заголовок</h2>
<p>Абзац</p> <!-- тут не будет стиля -->
  • Вопрос задан
  • 309 просмотров
Комментировать
Подписаться 2 Простой Комментировать
Решения вопроса 3
@This_is_him
https://codepen.io/VbDenis/pen/jOOepPP
Ответ написан
2 комментария
2 комментария
verkhoturov
@verkhoturov
HTML-Верстальщик / Frontend Developer
Попробуй вот так - 

<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>
Ответ написан
1 комментарий
1 комментарий
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;
  } 
}
Ответ написан
6 комментариев
6 комментариев
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработать парсер и админку
19 апр. 2024, в 14:12
30000 руб./за проект
Создать логотип
19 апр. 2024, в 14:10
500 руб./за проект
Разработка дизайна мобильного приложения которое управляет вентиляцией
19 апр. 2024, в 14:01
70000 руб./за проект
Ещё заказы