Как показать только первый компонент этого типа в разделе? - PullRequest
Новая
       10

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

0 голосов
/ 26 сентября 2019

У меня есть x количество разделов, у них есть x количество подразделов, и они будут отображать небольшое всплывающее окно, если условие выполнено, но может быть так, что условие может быть истинным для более чем одного на раздел, ноЯ хочу показать только первое всплывающее окно в каждом разделе.

Я пробовал использовать: first-of-type, (: not), устанавливая id для всплывающих окон, все, чтобы установить отображение: none to allэлементы раздела, которые не являются первыми в его типе. 

<div>
   <section>
      <Subsection><PopUp /> </Subsection>
      <Subsection> </Subsection>
      <Subsection><PopUp /> </Subsection>
   </section>
   <section>
      <Subsection> </Subsection>
      <Subsection> </Subsection>
      <Subsection><PopUp /> </Subsection>
   </section>

   <section>
      <Subsection> </Subsection>
      <Subsection><PopUp /> </Subsection>
      <Subsection><PopUp /> </Subsection>  
      <Subsection><PopUp /> </Subsection>
      <Subsection> </Subsection>
   </section>
<div>

И для CSS я работаю с эмоциями / стилями, но любой код, который работает с обычным CSS, будет работать для меня.

section {
 ...
 .PopUp:first-of-type {
   display: none
 }

}

Это всего лишь пример, у меня есть еще несколько стилей, компонентов и классов, но любое решение, которое работает с этим, будет работать для моего исходного кода.

Но, для информации, это стилизованный компонент. 

export const ProWrapper = styled.div`
  position: absolute;
  bottom: 35px;
  display: ${({ open }) => !open && 'none'};
`; /popup component/

export const SectionWrapper = styled.div`
  ${ProWrapper}:first-of-type {
    opacity: 0.7;
  }
`; /section component/

В примере я установил непрозрачность: 0,7, и все всплывающие окна на странице получили это правило, а не только первоетип

ОБНОВЛЕНИЕ:

IЯ решил, что javascript был моим первым вариантом, но я не мог заставить его работать с первого раза.

Решение: я создаю флаг = false для раздела, всплывающее окнобудет отображаться только в том случае, если флаг имеет значение false, и я устанавливаю значение флага в true, когда всплывающее окно отображается.

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

...