1

Galera, tenho a seguinte situação:

<div class="corpo">
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
</div>

Esse bloco de divs é gerado randomicamente e nao posso adicionar mais nada nele. Quero arranjar um jeito de saber qual o "item" do meio, com javascript ou css. Tipo no do meio quero uma borda laranja e nos dois laterais quero uma borda verde. Alguem tem uma solução?

0

3 Respostas 3

2

Pode utilizar js, através do método getElementsByClassName

<div class="corpo">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
</div>
<script>
var item = document.getElementsByClassName('item');	
alert(item[1].textContent);
</script>

Esse método irá armazenar todas as ocorrências em um array, e pode acessá-lo pela chave numérica.

1

Se a div tiver somente 3 itens, pode ser feito assim:

    .item{
        border: 1px solid green;
    }
    
    .item:nth-child(even) {
        border-color: orange;
    }
    <div class="corpo">
       <div class="item">1</div>
       <div class="item">2</div>
       <div class="item">3</div>
    </div>
    

0

Você pode usar dessa forma também, caso exista mais de um elemento no centro que necessite de borda laranja:

.corpo .item:first-child,
.corpo .item:last-child {
  border: 1px solid green;
}
        
.item {
    border: 1px solid orange;
}
<div class="corpo">
   <div class="item">Testo 1</div>
   <div class="item">Testo 2</div>
   <div class="item">Testo 3</div>
   <div class="item">Testo 4</div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .