Im not sure if im designing my solution correctly but essentially I have two radio inputs and when i select an option it displays the anchor tag .tick
which is fine. now I have an achor tag called .some
that where I need to put the value of the selected anchor tags href attribute in some. is this possible? p.s. needs to be html and css only. no javascript. do I need to re-design my solution?
<!DOCTYPE html>
<html>
<head>
<style>
.option .tick {
display: none;
}
.option input:checked ~ .tick {
display: inline;
}
#happy1:checked ~ .some:after {
content: " (happy1)";
}
#happy2:checked ~ .some:after {
content: " (happy2)";
}
</style>
</head>
<body>
<div class="step1">
<div class="row">
<label class="option">
Option 1
<input type="radio" name="select" id="happy1">
<a href="happy" class="tick">Happy 1</a>
</label>
</div>
<div class="row">
<label class="option">
Option 2
<input type="radio" name="select" id="happy2">
<a href="happy" class="tick">Happy 2</a>
</label>
</div>
</div>
<div>
<a href="linktosomething" class="some">Some</a>
</div>
</body>
</html>
Im not sure how to go about doing this
2
Answers
I found the answer after playing around abit. I used the :has() and :is() functions
css:
https://codepen.io/riobyucr-the-styleful/pen/OJdENYd
Without using JavaScript, you won’t be able to directly manipulate the content of an element based on user interactions. However, you can achieve a similar effect by leveraging the :checked pseudo-class and the general sibling combinator (~). Unfortunately, this approach has limitations, and it won’t allow you to directly set the href attribute of the anchor tag inside the .some element.
Here’s a modified version of your code to illustrate a possible workaround:
In this example, I’ve added unique IDs (id="happy1" and id="happy2") to your radio inputs to make it easier to reference them in CSS. I’ve also modified the .some:after rules to set the content based on the state of the radio buttons.
However, note that this solution has limitations, and it’s more of a workaround. The actual
href
attribute of the anchor tag won’t be dynamically updated without JavaScript. If JavaScript is an option, it would be a more straightforward and robust solution for this kind of dynamic behavior.