Let's imagine we have a checkbox, that when checked, should dim every wine that is not a white wine. Next to it is a div of wines, with the "container" class. The div contains wine elements.
:checked and :not() have been dependable for quite a few years now. Firefox has had ’em since at least version 1 (2004), Safari got ’em in 3.1 and 3.2 (2008), and Internet Explorer was the last player to the table in Internet Explorer 9 (March 2011). The rest of the selector features (tag, attribute, class, adjacent sibling, child) are older still (IE7 supported it all).
Semantic: embed data directly in HTML. If I have a list of wines with categories, each wine's "class" attribute has a class for each category.
HTML: can be generated by anything and consumed by anyone. Great SEO.
CSS: These websites were all made with the same HTML, only CSS changing. http://www.csszengarden.com/
Let's imagine we have a checkbox, that when checked, should dim every wine that is not a white wine. Next to it is a div of wines, with the "container" class. The div contains wine elements.
3 lines of CSS:
You can replace the checkbox's appearance with an image, a video, just about anything– it doesn't have to look like a checkbox.This would take many lines of JavaScript in any other framework.
Instead of attempting to warp HTML into a UI library, this uses HTML as a data format, and CSS as a way to present that data.