How to select a first and last element which does not contain the class hidden

Question

I like to perform a selection of the first and last element which does not contain the class hidden.

   <div class="gallery-cell hidden"></div>
    <div class="gallery-cell hidden"></div>
    <div class="gallery-cell"></div>
    <div class="gallery-cell"></div>
    <div class="gallery-cell"></div>
    <div class="gallery-cell"></div>
    <div class="gallery-cell hidden"></div>
    <div class="gallery-cell hidden"></div>

This works for me to catch all elements.

But how do I get only the first and last?

.gallery-cell:not(.hidden){
    opacity:0.2 !important;
}

Pure css would be awesome.

Hi Alexander, if you feel your question has been answered, please don't forget to mark some answers as "helpful" using the arrows, and one of them as "accepted" by using the checkmark. If your question hasn't been fully answered, please elaborate so we can further help! Thanks! — Maximillian Laumeister, Aug 11 '15 at 02:39

score 3 · Answer 1 · answered Aug 08 '15 at 21:16

This is unfortunately not possible in CSS only, because first-child, last-child, and nth-of-type all don't accomplish quite what we're looking for. Following is a JavaScript solution.

Live Demo:

var notHidden = document.querySelectorAll(".gallery-cell:not(.hidden)");
notHidden[0].classList.add("targeted");
notHidden[notHidden.length - 1].classList.add("targeted");

.gallery-cell {
    width: 100px;
    height: 100px;
    background-color: black;
    margin: 10px;
}

.targeted {
    opacity:0.2 !important;
}

<div class="gallery-cell hidden"></div>
<div class="gallery-cell hidden"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell hidden"></div>
<div class="gallery-cell hidden"></div>

score 0 · Answer 2 · answered Aug 08 '15 at 21:19

You can catch the first one using the adjacent sibling selector (+) with a :not() pseudo-class selector like this: .gallery-cell.hidden+:not(.hidden). I don't have a solution for "last-before..."

.gallery-cell {
  background-color: lightblue;
  height: 20px;
  border: 1px black solid;
}
.hidden {
  background-color: blue;
}

.gallery-cell.hidden+:not(.hidden){ /* <- This will catch first non-hidden */
  border: 2px green solid;
}

<div class="gallery-cell hidden"></div>
<div class="gallery-cell hidden"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell hidden"></div>
<div class="gallery-cell hidden"></div>

How to select a first and last element which does not contain the class hidden

2 Answers2