::active + CSS is not working

Question

div.duvidas2 > div > div::active + 
div.duvidas2 > div > article {
		display: block;
}
div.duvidas2 > div > article {
		display: none;
}

<div class=duvidas2>
  <div>
    <div>
      <span>Titulo 1</span>
      <label>+</label>  
    </div>
    <article>Artigo 1.</article>
  </div>
  <div>
    <div>
      <span>Titulo 2</span>
      <label>+</label>  
    </div>
    <article>Artigo 2.</article>
  </div>
</div>

My goal is to click on div.duvidas2 > div and open the article But only the article of div.duvidas2 > div that is active must be with display:block

Where am I going wrong?

Answer 1

Man it’s all wrong...

Active doesn’t have two-points, it’s not like that ::active, that’s how it is :active

No use putting :active in a div, pq :active is not a property of that type of element, :active is to use in links and some elements of form, but not in a div

The tb rule is wrong...

div.duvidas2 > div > div::active + 
div.duvidas2 > div > article

First you’re using the + who would take a div with class div.duvidas2 that comes after the first div with div.duvidas2, only you only have one div.duvidas2 then the rule no longer matches...

That’s where you’re wrong

Now from what I understand you want, an option would be using a tag <a> and the pseudo class :focus, so when you click on will make the Focus and show the <article> with a type CSS rule a:focus + article {display:block}

div.duvidas2 > div > a + article {
    display: none;
}
div.duvidas2 > div > a:focus + article {
    display: block;
}

<div class=duvidas2>

  <div>
    <a href="#">
      <span>Titulo 1</span>
      <label>+</label>  
    </a>
    <article>Artigo 1.</article>
  </div>

  <div>
    <a href="#">
      <span>Titulo 2</span>
      <label>+</label>  
    </a>
    <article>Artigo 2.</article>
  </div>

</div>