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.

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