Dealing with invisible children in CSS

Question

I'm working on the CSS for a container object. I have it mostly working. Specifically I'm looking at test case 11 and 12. I would like to ignore invisible children when dealing with :first-child and :last-child.

Using :visible:first-child doesn't seem to work as I would have expected. And google failed me... :visible isn't really a selector at all, its a jQuery thing.

Is there anyway with CSS to select the first/last visible child?

Here is a Codepen as well.

code, p, quote {
  display: block;
  position: relative;
  margin: 0;
  padding: 1em;
  border: 1px solid black;
  box-sizing: border-box;
}

code {
  background-color: #ccc;
}

p {
  background-color: #0df;
}

quote {
  background-color: #fd0;
}

quote::after {
  display: table;
  clear: both;
  content: "";
}

.hidden {
  display: none;
}

.third {
  height: 100%;
  width: 33%;
  float: left;
  border: 1px solid black;
}

.container {
  display: block;
  position: relative;
  margin-right: 0;
  margin-left: 0;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  padding: 0.5rem;
  border: 1px solid black;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: none;
}

.container > :first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-width: 0;
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.container > :last-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-width: 0;
  border-left-width: 0;
  border-right-width: 0;
  margin-top: 0.5rem;
  margin-bottom: -0.5rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.container > :not(:first-child):not(:last-child) {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  margin-bottom: -0.5rem;
  border-right-width: 0;
  border-left-width: 0;
  border-bottom-width: 0;
}

.container > :only-child {
  border-radius: 10px;
  border-width: 0;
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

<p>p</p>
<br />
<code>code</code>
<br />
<quote>quote</quote>

<div id="0" class="container">
  text
</div>

<div id="1" class="container">
  <p>first child</p>
  text
  <code>last child</code>
</div>

<div id="2" class="container">
  <p>first child</p>
  text
</div>

<div id="3" class="container">
  text
  <p>last child</p>
</div>

<div id="4" class="container">
  <p>first child</p>
  <code>last child</code>
</div>

<div id="5" class="container">
  <code>first child</code>
  <p>last child</p>
</div>

<div id="6" class="container">
  <code>first child</code>
  <code>last child</code>
</div>

<div id="7" class="container">
  <p>first child</p>
  <p>last child</p>
</div>

<div id="8" class="container">
  <code>only child</code>
</div>

<div id="9" class="container">
  <p>first child</p>
  <quote>middle child</quote>
  <quote>middle child</quote>
  <p>last child</p>
</div>

<div id="10" class="container">
  <quote>
    <div class="third">1</div>
    <div class="third">2</div>
    <div class="third">3</div>
  </quote>
</div>

<div id="11" class="container">
  <quote class="hidden">hidden child</quote>
  <p>first child</p>
  <p>last child</p>
</div>

<div id="12" class="container">
  <p>first child</p>
  <p>last child</p>
  <quote class="hidden">hidden child</quote>
</div>

Its unclear to me that what you're asking exactly. As you stated using `:visible:first-child` not working but I couldn't see the use of the `:visible:first-child` anywhere. So, update your post to clear the things. — Bhojendra Rauniyar, Jul 19 '16 at 04:18
@BhojendraNepal - I updated the question, `:visible` doesn't work as its not CSS, its jQuery. — Justin808, Jul 19 '16 at 04:25
This looks very similar to http://stackoverflow.com/questions/38449462/dealing-with-text-nodes-in-css — julianstark999, Jul 19 '16 at 04:45
[Selectors level 4 will allow things like `:not([hidden])`](https://drafts.csswg.org/selectors-4/#negation) — steveax, Jul 19 '16 at 05:10

score 1 · Answer 1 · answered Jul 19 '16 at 04:42

There is no :visible selector, but you may use some class to select hidden elements (as you already do), so this should look like this:

.hidden + :not(.hidden) {
    //code you want to set to first visible child goes here
}
.hidden + :not(.hidden) ~ :not(.hidden) {
    //code to reset stuff what you've set before
}

Dealing with invisible children in CSS

1 Answers1

Linked