Dynamicaly add selector for class with JavaScript

Question

How to dynamically add :checked:nth-of-type selector to every checkbox with native JavaScript?

I tried this. HTML

<input type="radio" name="slider" title="slide2" class="slider-nav"/>
<input type="radio" name="slider" title="slide3" class="slider-nav"/>

And static selectors in CSS

.slider-nav:checked:nth-of-type(1) ~ .slider-inner {
      left: 0%;
    }

.slider-nav:checked:nth-of-type(2) ~ .slider-inner {
      left: -100%;
    }

.slider-inner {
    position: absolute;
    top: 0;
    left: 0;
}

My idea is add slider-nav:checked:nth-of-type(NN) ~ .slider-inner dynamically with JS

So, on JacaScript file I have next code:

window.addEventListener("load", (e) => {
    let num = document.getElementsByClassName('slider-nav');
    for (let i = 0; i < num.length; i++) {

        let newClass = 'slider-nav' + ':checked:nth-of-type(' + (i + 1) + ')';
        console.log('newClass: ' + newClass);
        // HOW TO ADD CLASS TO STYLESHEET NOW?
    }
});

And here I don't know how to add properties to the class and how to add new class to StyleSheet? And yes, I'm beginner in JS.

They're pseudo-classes. You dont add them directly, they match due to the state of the element. In this case surely you just add the checked property? — Jamiec
– Jamiec, Commented Nov 7, 2019 at 15:45
@Jamiec Hi. Thank you for the answer. As you can see form the CSS code, I should change "left" property depends from which radio checked by user. — Alex
– Alex, Commented Nov 7, 2019 at 15:50
Yes, so depending if its the 1st or second checked item that should work. — Jamiec
– Jamiec, Commented Nov 7, 2019 at 15:52
This is a slider. I want automate process. I want add HTML input tags and don't want change anything in CSS file. Shortly, if I adding input, I should to get appropriate number of pseudo classes for each input. And I want to get left: NNN% for every pseudo class. — Alex
– Alex, Commented Nov 7, 2019 at 16:18

Jamiec · Accepted Answer · 2019-11-07 16:08:43Z

1

Those selectors beginning : are CSS pseudo-classes as such you do not add them directly; they apply depending on the state, or position (etc) of the matched elements.

I have simplified your example below to demonstrate this. Depending on whether the checkbox is in the checked state (:checked) and whether it is first or second (:nth-of-type(1) or nth-of-type(2)) controls what color the span is following them.

.slider-nav:checked:nth-of-type(1) ~ .slider-inner {
  background-color:red
}

.slider-nav:checked:nth-of-type(2) ~ .slider-inner {
  background-color:blue
}

.slider-inner{
  background-color:magenta
}

<input type="radio" name="slider" title="slide2" class="slider-nav" />
<input type="radio" name="slider" title="slide3" class="slider-nav"/>
<span class="slider-inner">Content</span>

answered Nov 7, 2019 at 16:08

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex · Accepted Answer · 2019-11-07 16:42:39Z

0

I found decision. Thanks to @Jamiec

const inputs = document.querySelectorAll('.slider-nav');
for (let i = 0; i <inputs.length ; i++)
{
    inputs[i].addEventListener('click', () => {
        let SI = document.querySelector(".slider-inner");
        SI.style.left = -i*100 + '%';
    })
}

answered Nov 7, 2019 at 16:42

Alex

7153 gold badges10 silver badges20 bronze badges

Collectives™ on Stack Overflow

Dynamicaly add selector for class with JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related