CSS child element: checked sets the parent element style

In CSS, we can use :checked The :checked pseudo-class selector is used to select checked form elements, such as checkboxes or radio buttons. However, you may not know that you can also use the :checked selector to style parent elements. In this article, we’ll detail how to use the :checked selector to style parent elements and provide some sample code to help you better understand this concept.

Example 1: Basic Usage

First, let’s look at a basic example demonstrating how to use the :checked selector to style a parent element. In this example, we have a checkbox and an adjacent <div> element. When the checkbox is checked, we’ll change the background color of the <div> element.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS :checked Set parent element style</title> 
<style> 
input[type="checkbox"]:checked + div { 
background-color: lightblue; 
} 
</style> 
</head> 
<body> 
<input type="checkbox" id="checkbox"> 
<div>When the checkbox is checked, I will change the background color. </div> 
</body> 
</html>

Output:

CSS Child Element: checked sets parent element style

In this example, we use input[type="checkbox"]:checked + div to select the adjacent <div> element of the checked checkbox and set its background color to lightblue. When you check the checkbox, you will see the background color of the <div> element change.

Example 2: Setting Parent Element Styles

In addition to changing the style of adjacent elements, we can also use the :checked selector to set the style of the parent element. In this example, we have a list with multiple checkboxes, and when a checkbox is checked, we change the background color of its parent element <li>.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS :checked sets parent element style</title> 
<style> 
input[type="checkbox"]:checked + label { 
color: green; 
} 
input[type="checkbox"]:checked + label + ul { 
background-color: lightyellow; 
} 
</style> 
</head> 
<body> 
<ul> 
<li> 
<input type="checkbox" id="checkbox1"> 
<label for="checkbox1">Option 1</label> 
<ul> <li>Sub-option 1</li>
<li>Sub-option 2</li>
</ul>
</li>
<li>
<input type="checkbox" id="checkbox2">
<label for="checkbox2">Option 2</label>
<ul>
<li>Sub-option 1</li>
<li>Sub-option 2</li>
</ul>
</li>
</ul>
</body>
</html>

Output:

CSS child element: checked Set parent element style

In this example, we use input[type="checkbox"]:checked + label to select the <label> element adjacent to a checked checkbox and set its color to green. We also use input[type="checkbox"]:checked + label + ul to select the <ul> element adjacent to a checked checkbox and set its background color to lightyellow. When you select a checkbox, you’ll see the styles of the corresponding <label> and <ul> elements change.

Example 3: Using Pseudo-Elements

In addition to directly styling the parent element, we can also use pseudo-elements to further beautify the selected element. In this example, we will add a checkmark icon to the selected checkbox.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS :checked sets parent element style</title> 
<style> 
input[type="checkbox"] { 
display: none; 
} 
input[type="checkbox"] + label { 
position: relative; 
padding-left: 20px; 
} 
input[type="checkbox"]:checked + label::before { 
content: "2713"; 
position: absolute; 
left: 0; 
color: green; 
} 
</style> 
</head> 
<body> <input type="checkbox" id="checkbox">
<label for="checkbox">Checkbox</label>
</body>
</html>

Output:

CSS child element: checked sets parent element style

In this example, we first make the checkbox invisible and then use input[type="checkbox"] + label to style the <label> element. Finally, we use input[type="checkbox"]:checked + label::before to add a checkmark icon to the selected checkbox. When you select a checkbox, you’ll see a green checkmark icon appear in front of the <label> element.

Example 4: Incorporating CSS Animations

We can also combine CSS animations to add dynamic effects to selected elements. In this example, we’ll add a gradient background color and a rotation animation to the selected checkbox.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS :checked sets parent element style</title> 
<style> 
input[type="checkbox"] { 
display: none; 
} 
input[type="checkbox"] + label { 
display: block; 
width: 100px; 
height: 100px; 
background-color: lightblue; 
transition: background-color 0.5s; 
} 
input[type="checkbox"]:checked + label { 
background: linear-gradient(to right, lightblue, lightgreen); 
animation: rotate 1s infinite; 
} 
@keyframes rotate { 
0% { 
transform: rotate(0deg); 
} 
100% { 
transform: rotate(360deg); 
} 
} 
</style> 
</head> 
<body> 
<input type="checkbox" id="checkbox"> 
<label for="checkbox"></label> 
</body> 
</html>

Output:

CSS child element: checked sets parent element style

In this example, we first make the checkbox invisible and then use input[type="checkbox"] + label sets the style of the <label> element and adds a background color gradient and rotation animation. When you select the checkbox, you’ll see the background color of the <label> element gradually change and rotate 360 degrees.

Example 5: Using CSS Variables

We can also use CSS variables to dynamically change the style of selected elements. In this example, we’ll set a dynamic background color for the selected checkbox.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS :checked sets parent element style</title> 
<style> 
:root { 
--bg-color: lightblue; 
} 
input[type="checkbox"] { 
display: none; 
} 
input[type="checkbox"] + label { 
display: block; 
width: 100px; 
height: 100px; 
background-color: var(--bg-color); 
transition: background-color 0.5s; 
} 
input[type="checkbox"]:checked + label { 
--bg-color: lightgreen; 
} 
</style> 
</head> 
<body> 
<input type="checkbox" id="checkbox"> 
<label for="checkbox"></label> 
</body> 
</html>

Output:

CSS child element: checked sets parent element style

In this example, we use the :root pseudo-class to define a CSS variable --bg-color and set its initial value to lightblue. We then use input[type="checkbox"] + label to style the <label> element and dynamically change the value of the --bg-color variable to lightgreen when the checkbox is checked. When you check the checkbox, you’ll see the background color of the <label> element gradually change from blue to green.

Through the above example, you can see how to use the :checked selector to style the parent element and combine it with other CSS properties and features to achieve richer effects.