Вложенность псевдоклассов в CSS - PullRequest
Новая
       50

Вложенность псевдоклассов в CSS

0 голосов
/ 03 мая 2020

Я пытаюсь получить доступ к последнему вхождению элемента, а внутри этого элемента - к первому вхождению другого элемента. Поэтому здесь я пытаюсь получить доступ к последнему тегу статьи и первому тегу p после этого. 

    <div class = "wrapper">
        <article class = "article-info">
            <h3>Test1</h3>
            <p>Lorem Ipsum.</p>
        </article>
        <article class = "article-info">
            <h3>Test2</h3>
            <p>Lorem Ipsum.</p>
        </article>
        <article class = "article-info">
            <h3>Test3</h3>
            <p>Lorem Ipsum.</p>
        </article>
    <div/>

Я знаю, что могу получить доступ к последней статье с помощью 'last-child', но возможно ли вкладывать другие псевдоклассы для доступа к первому элементу p? Спасибо!

1 Ответ

0 голосов
/ 03 мая 2020

Вы можете использовать :last-of-type и :first-of-type. Это будет работать, даже если есть элементы после последнего article или до первого p тега 

.wrapper article:last-of-type p:first-of-type {
  background: red;
}
<div class="wrapper">
  <article class="article-info">
    <h3>Test1</h3>
    <p>Lorem Ipsum.</p>
  </article>
  <article class="article-info">
    <h3>Test2</h3>
    <p>Lorem Ipsum.</p>
  </article>
  <article class="article-info">
    <h3>Test3</h3>
    <p>Lorem Ipsum.</p>
    <p>Lorem Ipsum.</p>
  </article>
  <div>Hello</div>
  <div/>
...