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

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

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

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

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

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Тестирование модуля ElasticSearch через ftp
22 нояб. 2024, в 03:54
1500 руб./за проект
Телеграм бот
22 нояб. 2024, в 02:56
10000 руб./за проект
Перерисовать логотип в векторе
22 нояб. 2024, в 00:55
500 руб./за проект
Ещё заказы