CODEWITHSUNDEEP
csssasscss-selectors
José Gouveia
José Gouveia

Reputation: 45

Abstracting CSS

Is there any way of making an abstract rule of css where this kind of code (sass):

#cottage-image-gallery input:nth-of-type(1):checked ~ label:nth-of-type(1) img,
#cottage-image-gallery input:nth-of-type(2):checked ~ label:nth-of-type(2) img,
#cottage-image-gallery input:nth-of-type(3):checked ~ label:nth-of-type(3) img,
#cottage-image-gallery input:nth-of-type(4):checked ~ label:nth-of-type(4) img,
#cottage-image-gallery input:nth-of-type(5):checked ~ label:nth-of-type(5) img,
#cottage-image-gallery input:nth-of-type(6):checked ~ label:nth-of-type(6) img,
#cottage-image-gallery input:nth-of-type(7):checked ~ label:nth-of-type(7) img,
#cottage-image-gallery input:nth-of-type(8):checked ~ label:nth-of-type(8) img
  position: fixed

can be turned into something like this:

#cottage-image-gallery input:nth-of-type(n):checked ~ label:nth-of-type(n) img
  position: fixed

when n equals 1 the same goes to the second variable; when n equals 2 the second variable goes 2; and so on...

The reason I am not using the adjacent selector "+" is that I need to have the inputs under the same parent but all near each other.

Best Regards

Example: https://codepen.io/s3m3nT3s/pen/rYBxLq

Upvotes: 0

Views: 52

Answers (1)

cjl750
cjl750

Reputation: 4639

In Sass, you can use a @for directive to do this.

@for $i from 1 through 8
  #cottage-image-gallery input:nth-of-type(#{$i}):checked ~ label:nth-of-type(#{$i}) img
    position: fixed

Outputs this:

#cottage-image-gallery input:nth-of-type(1):checked ~ label:nth-of-type(1) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(2):checked ~ label:nth-of-type(2) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(3):checked ~ label:nth-of-type(3) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(4):checked ~ label:nth-of-type(4) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(5):checked ~ label:nth-of-type(5) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(6):checked ~ label:nth-of-type(6) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(7):checked ~ label:nth-of-type(7) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(8):checked ~ label:nth-of-type(8) img {
  position: fixed;
}

However, given HTML like this:

<input id="slide1" type="radio" name="cottage-image" data="1">
<input id="slide2" type="radio" name="cottage-image">
<input id="slide3" type="radio" name="cottage-image">
<input id="slide4" type="radio" name="cottage-image">
<input id="slide5" type="radio" name="cottage-image">
<input id="slide6" type="radio" name="cottage-image">
<input id="slide7" type="radio" name="cottage-image">
<input id="slide8" type="radio" name="cottage-image">
<input id="slide0" type="radio" name="cottage-image" checked>
<label for="slide1"><img src="http://calhaugrande.com/img/sol/1.jpg"></label>
<label for="slide2"><img src="http://calhaugrande.com/img/sol/2.jpg"></label>
<label for="slide3"><img src="http://calhaugrande.com/img/sol/3.jpg"></label>
<label for="slide4"><img src="http://calhaugrande.com/img/sol/4.jpg"></label>
<label for="slide5"><img src="http://calhaugrande.com/img/sol/5.jpg"></label>
<label for="slide6"><img src="http://calhaugrande.com/img/sol/6.jpg"></label>
<label for="slide7"><img src="http://calhaugrande.com/img/sol/7.jpg"></label>
<label for="slide8"><img src="http://calhaugrande.com/img/sol/8.jpg"></label>
<label for="slide0"></label>

There is simply no way in pure CSS to match input[id="slide1"] with label[for="slide2"], input[id="slide2"] with label[for="slide2"], and so on without repeating yourself a bunch of times like you already are with :nth-child().

The CSS way to do that would be something like:

#cottage-image-gallery input:nth-of-type([id]):checked ~ label:nth-of-type([for]) img

But you can't use attribute selectors inside :nth-child(). Maybe in the future!

Upvotes: 1

Related Questions