Well, I have the following situation:
<div class="corpo">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
This div block is randomly generated and I can not add anything else to it. I want to find a way to know what the "middle" item is, with javascript or css. Type in the middle I want an orange border and on both sides I want a green border. Does anyone have a solution?
You can use js, using the 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>This method will store all occurrences in an array, and can access it by the numeric key.
If the div has only 3 items, it can be done like this:
.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>
You can also use this if there is more than one element in the center that needs an orange border:
.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>