CSS Selector for table cell containing a checked input in the cell before it

Question

CSS Selector for table cell containing a checked input in the cell before it

Is it possible to select a table cell based on the state of a previous cell using CSS? I have a feeling that this may not be achievable with CSS alone. Can someone confirm my suspicion?

Let's consider this example:

<table>
    <tr>
        <td>Row with checked input</td>
        <td><input type=checkbox checked /></td>
        <td>should show.</td>
    </tr>
    <tr>
        <td>Row with unchecked input</td>
        <td><input type=checkbox /></td>
        <td>should be hidden.</td>
    </tr>
</table>

Here is the CSS code that I attempted:

td:last-child { display:none; }
input:checked ~ td:last-child { display:initial; }

The first part of the selector can hide unchecked inputs, but the second part fails to make the input visible again. It seems like the ~ combinator struggles with targeting children of previous siblings. Is there a workaround in CSS for this issue, or should I consider a JavaScript solution?

Feel free to check out this JSFiddle link for live testing and experimentation.

html css css-selectors

Answer 1

Answer №1

Unfortunately, the current HTML structure does not allow CSS to target parent elements. For example, a pseudo-selector for an input cannot directly affect its parent td, and similarly, it cannot affect its parent's sibling.

If you are open to adjusting your HTML layout, one solution is to place the element that needs to be hidden or shown as a direct sibling inside the same table cell.

<table>
<tr>
    <td>Row with checked input</td>
    <td><input type=checkbox checked /><span>should show.</span></td>
</tr>
<tr>
    <td>Row with unchecked input</td>
    <td><input type=checkbox /><span>should be hidden.</span></td>
</tr>
</table>

CSS

input:not(:checked) + span { display:none; }

You can view this implementation on JSFiddle here.

Answer 2

Unfortunately, the current HTML structure does not allow CSS to target parent elements. For example, a pseudo-selector for an input cannot directly affect its parent td, and similarly, it cannot affect its parent's sibling.

If you are open to adjusting your HTML layout, one solution is to place the element that needs to be hidden or shown as a direct sibling inside the same table cell.

<table>
<tr>
    <td>Row with checked input</td>
    <td><input type=checkbox checked /><span>should show.</span></td>
</tr>
<tr>
    <td>Row with unchecked input</td>
    <td><input type=checkbox /><span>should be hidden.</span></td>
</tr>
</table>

CSS

input:not(:checked) + span { display:none; }

You can view this implementation on JSFiddle here.

Answer 3

Answer №2

As of now, accomplishing this task with CSS alone while maintaining full browser support remains a challenge. To ensure cross-browser compatibility, you may need to implement an event listener/handler using JavaScript. Utilizing a jQuery solution could be the most straightforward approach if you are already familiar with it.

For example, you can use the jQuery(":checked") selector, and refer to the API documentation here.

Creating simple functions for .hide() and .show() can help achieve your desired outcome, as outlined in the API documentation.

It's worth noting that the :checked selector is currently only supported by Opera, as indicated by W3schools.com

Answer 4

As of now, accomplishing this task with CSS alone while maintaining full browser support remains a challenge. To ensure cross-browser compatibility, you may need to implement an event listener/handler using JavaScript. Utilizing a jQuery solution could be the most straightforward approach if you are already familiar with it.

For example, you can use the jQuery(":checked") selector, and refer to the API documentation here.

Creating simple functions for .hide() and .show() can help achieve your desired outcome, as outlined in the API documentation.

It's worth noting that the :checked selector is currently only supported by Opera, as indicated by W3schools.com

CSS Selector for table cell containing a checked input in the cell before it

Answer №1

Answer №2

Similar questions

Using different browsers can cause web fonts to appear rough and pixelated

By default, the D3 hierarchy will collapse to the first level

Updating Select Options with Multiple Values using Javascript

Overcoming Troublesome Login Input Box in Web

Issue encountered while attempting to include a background image in React JS

What methods are available for populating bootstrap columns dynamically with the use of jquery, php and smarty templating?

Manipulating child classes using jQuery

Center an image and superimpose text in the middle of the webpage

Troubles with Bootstrap's navbar dropdown menu functionality

I want to know how to move data (variables) between different HTML pages. I am currently implementing this using HTML and the Django framework

Ways to move to the next line following the navigation bar text

What is the best way to use jQuery to apply CSS only to elements with a specific attribute set?

Conceal and reveal content using jQuery

How can you ensure a cohesive visual style throughout various Razor and HTML views?

Troubleshooting problems with dataTransfer and the file input type in JavaScript

An issue occurred with the DOMException while trying to execute the 'setAttribute' function on the 'Element': '{{' is an invalid attribute identifier

Unable to use the ordered tag correctly in typing

Tips for configuring a file using javascript and angular.js

What steps can be taken to ensure the visibility and accessibility of two vertically stacked/overlapped Html input elements in HTML?

Display PHP Array data in a table on a webpage