0

I am seeking a CSS-only solution to identifying the first element of the intersection between:

  • every 5th child flex-element
  • empty-filler elements

CodePen Example: Please read my example first https://codepen.io/anon/pen/aqXyPP.

My attempt here doesn't work.

.flex-element:nth-child(5n).empty-filler:first-child {
  font-weight: bold;
  font-style: italic;
}

However, if I remove the pseudo class selector :first-child I get close to my solution, but, then the 15 is also incorrectly selected.

Question 1) How can I change my CSS selectors to achieve my goal? While I can change my CSS and HTML structure, I cannot introduce new css classes into my HTML markup.

Question 2) Can I use :nth-child() and :first-child together?

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Michael R
  • 1,547
  • 1
  • 19
  • 27

1 Answers1

1

You can't really :first-child a class, but you can sort of hack this by resetting all selected elements but the very first to the original value using a general sibling combinator

/* select every fifth item that's also .empty-filler
/* this should select 10 and 15 */
.flex-element:nth-child(5n).empty-filler{
  color: red
}

/* resets siblings to original value, which leaves only the first highlighted. 
/* In this case resets the 15, leaving only 10 as red*/
.flex-element:nth-child(5n).empty-filler ~ .flex-element:nth-child(5n).empty-filler{
  color:black;    
}

* {
  box-sizing: border-box;
}

.content {
  padding: 8px;
  border: 1px solid lightgrey;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
}

.flex-element {
  border: 1px solid black;
  width: 100px;
  height: 50px;
  padding: 4px;
  font-size: 24px;
}

.filled {
  background: #bbb;
}

.empty-filler {
  background: #eee;
}
<div class="content">
  <div class="flex-container">
    <div class="flex-element filled">1</div>
    <div class="flex-element filled">2</div>
    <div class="flex-element filled">3</div>
    <div class="flex-element filled">4</div>
    <div class="flex-element filled">5</div>
    <div class="flex-element filled">6</div>
    <div class="flex-element filled">7</div>
    <div class="flex-element filled">8</div>
    <div class="flex-element empty-filler">9</div>
    <div class="flex-element empty-filler">10</div>
    <div class="flex-element empty-filler">11</div>
    <div class="flex-element empty-filler">12</div>
    <div class="flex-element empty-filler">13</div>
    <div class="flex-element empty-filler">14</div>
    <div class="flex-element empty-filler">15</div>
    <div class="flex-element empty-filler">16</div>
  </div>
<div>

The above code selects all items that are multiples of 5 (so all of the 5th column) + .empty-filler (in this case, 10 and 15) and turns them red.

Then is uses a ~ general sibling combinator to reset the original value on any matched element that has a previous sibling matching the criteria, so it targets the 15 resting it back to black, and leaves the 10 red as it didn't had a previous sibling matching the criteria.

Facundo Corradini
  • 3,825
  • 9
  • 24