Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jonathan Fernandez
Jonathan Fernandez
7,542 Points

Select <html> tag through input:checked via css

Just wanted to know if anyone knew a way I can select and style the html tag directly after looking for :checked in css.

#btnControl:checked ??? html {
    overflow: hidden;
}

Any feedback will be greatly appreciated! : )

Best, Jonathan

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

The problem with a selector like: "#btnControl:checked ??? html" is that it would target an html element that is a descendant of a checked input element. But the html element is the root element and is not a descendant of any other element.

Parent selectors, sometimes called reverse selectors, would make it possible to do what you are suggesting. These have been proposed for addition to CSS for years but have never been accepted, due in part to the serious performance issues they could create.

So the short answer is, "no, you can't do that".

The good news is that you can simulate it using JavaScript. You can create an event handler to respond to your input being clicked, and this handler can apply styles to the html element. For example, using JavaScript with JQuery, your impossible CSS above could be translated into this:

$("#btnControl").click(function(){
    $("html").css("overflow", "hidden");
});

You can also do it without JQuery, but the code would be more verbose.

Happy coding!

Jonathan Fernandez
Jonathan Fernandez
7,542 Points

Thanks for the answer Steven. I'm trying to stay away from javascript so pretty bummed out that we still don't have a method for this yet in css. You can add me to the list of people hoping for the addition haha.