pseudo-classes in CSS

Question

I’m creating a module that will show information. this information should be displayed as expandable div’s, which I created using only CSS as is here:

.news .itens {
    overflow: auto;
    margin-right: -20px;
    height: 292px;
    float: left;
    width: 290px;
    font-size: 65%;
}

.news .itens a {
    float: left;
    width: 258px;
    padding: 0px 5px;
    text-align: right;
    height: auto;
    background:rgba(168, 202, 106,0.3);
    line-height: 25px;
    border-right: 2px solid rgb(168, 202, 106);
    margin-bottom: 2px;
    font-size: 120%;
}

.news .itens p {
    display:none;
    float: left;
    line-height: 20px;
    padding: 0px 5px;
    width: 248px;
    border-left: 2px solid rgb(255,255,255);
    background: rgb(255,255,255);
    margin-bottom: 0px;
    text-align: justify;
    overflow:hidden;
}

.news .itens a:focus p{
    display:block;
}

.news .itens a:first-child p{
    display:block;
}

.news .itens a:first-child + .news .itens a:focus p{
    display:none;
}

My problem is I need to make the first existing element in the div a:first-child close as soon as it is clicked on another existing element, and when no element is focus, that it stays open as it is in CSS.

How could this be done?

Answer 1

Take this example:

1st HTML ->

<div id="acordeon">
   <a href="#primeira">Primeira</a>        
   <div id="primeira">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
   </div>
   <a href="#segunda">Segunda</a>        
   <div id="segunda">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
   </div>
   <a href="#terceira">terceira</a>        
   <div id="terceira">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
   </div>

2nd CSS ->

#acordeon div {
    height: 0;
    overflow: hidden;
    transition: height 600ms;
    background: #999;
}
 #acordeon div: target {
    height: 110px;
}