How connect inputs with another selector in HTML/CSS?

Question

I need to change <p> color by checking one of the buttons:

<div class="textstyle">
    <span class="textarea">
        <p class="text">Some text here</p>
    </span>
    <div class="buttons">
        <input type="radio" id="red" name="textbutton" checked/><label for="red">Red</label>
        <input type="radio" id="blue" name="textbutton"/><label for="blue">Blue</label>
        <input type="radio" id="green" name="textbutton"/><label for="green">Green</label>
    </div>
</div>

So, buttons and paragraph have one grandparent. How can I change this structure or what CSS rules should I add to make this work?

UPD: without JS or jQuery

Maybe a basic css tutorial is helpful to you: https://www.w3schools.com/Css/ — Rob Monhemius, Nov 25 '19 at 07:37
I think this is sort of what you want, without javascript and jquery: https://codepen.io/tobiasdev/pen/YWpBxX — Natrium, Nov 25 '19 at 07:40

Viral · Accepted Answer · 2019-11-25T08:41:09.200

9

Here is one way you can achieve this with HTML/CSS only.

input ~ p Selects every <p> element that are preceded by a <input> element.

input:checked Selects every checked <input> element. In our case, we are using radio buttons so we can only select on at a time.

input#red:checked ~ .text {
color: red;
}
input#blue:checked ~ .text {
color: blue;
}
input#green:checked ~ .text {
color: green;
}

<div class="textstyle">
    <div class="buttons">
        <input type="radio" id="red" name="textbutton" checked/><label for="red">Red</label>
        <input type="radio" id="blue" name="textbutton"/><label for="blue">Blue</label>
        <input type="radio" id="green" name="textbutton"/><label for="green">Green</label>
         <p class="text">Some text here</p>
    </div>
</div>

edited Nov 25 '19 at 08:41

answered Nov 25 '19 at 08:30

Viral

1,211
1
8
19

Can I leave the `````` wrapper around ```
```?
– Watermelonnn Nov 25 '19 at 09:38
Hi @Watermelonnn, yes you can have `` wrapper around `
` but in this case, you need to tweak your `CSS` a bit. For example: `input#red:checked ~ span .text`
– Viral Nov 25 '19 at 12:12

score 1 · Answer 2 · answered Nov 25 '19 at 15:46

1

Considering your original html structures, no way to get parent div element of input, and relative p.text element with pure css, now.

Is there a CSS parent selector?

Using Javascript approach!

answered Nov 25 '19 at 15:46

Ire

29
3

Goran Stoyanov · Answer 3 · 2019-11-25T08:51:14.233

I'm not sure how and if this can be done with CSS only without altering the original HTML structure but here's an approach with Javascript:

//selects the paragraph tag
const paragraph = document.querySelector('p.text');
//selects all radio inputs
const checkboxes = document.querySelectorAll('input[type=radio]');

//adds a click event listener to each radio input which will trigger a change of the paragraph style property which matches the radio buton id (ex. red text color after clicking the radio input with id=red).
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('click', (e) => {
    paragraph.style.color = e.target.id;
  });
});

<div class="textstyle">
    <span class="textarea">
        <p class="text">Some text here</p>
    </span>
    <div class="buttons">
        <input type="radio" id="red" name="textbutton"/><label for="red">Red</label>
        <input type="radio" id="blue" name="textbutton"/><label for="blue">Blue</label>
        <input type="radio" id="green" name="textbutton"/><label for="green">Green</label>
    </div>
</div>

score 0 · Answer 4 · answered Nov 25 '19 at 08:11

0

this codes maybe help you :

$('input[name="textbutton"]').on('change' , function(){
var _color = $(this).attr('id');
$('.text').addClass(_color);
});

and according to p element class name you can give style to your element

answered Nov 25 '19 at 08:11

N.SH

103
11

What's the point of using jQuery instead of vanilla Javascript? – Goran Stoyanov Nov 25 '19 at 08:35

How connect inputs with another selector in HTML/CSS?

4 Answers4

Linked