Pick out grouped objects without the use of Javascript

I am looking to design a single page where the display of categorized items changes based on user selection. Ideally, I want this to be chapter/hash (:target) dependent, but checkboxes influencing state would also work.

As an experiment, I am trying to achieve this without the use of Javascript. While it seems impossible, I am open to being proven wrong.

To elaborate: in this scenario, there are multiple items on a page, each belonging to one or more categories. The user will choose a category, prompting all matching items to have their display set to block. Items not falling under the selected category will be hidden (display: none). For instance, if selecting a class instead of ID with :target, the structure could look like this:

<a href="#category1>Category 1</a>
<a href="#category2>Category 2</a>
<a href="#category3>Category 3</a>

<span class="category1 category2">Item 1</span>
<span class="category2 category3">Item 2</span>
<span class="category3">Item 3</span>

and corresponding CSS:

span {
    display: none;
}
:target {
    display: block;
}

(While achievable through Javascript, I am exploring non-Javascript options.)

Answer №1

To achieve element (un)clicking functionality, you cannot use the <a> tag since there is no CSS selector for it. However, you can utilize checkboxes with the :checked pseudo-class.

<input type="checkbox" value="1" id="cat1" name="category">Category 1</label>
<input type="checkbox" value="2" id="cat2" name="category">Category 2</label>
<input type="checkbox" value="3" id="cat3" name="category">Category 3</label>

<span class="category1 category2">Item 1</span>
<span class="category2 category3">Item 2</span>
<span class="category3">Item 3</span>

Additionally, you can style these elements using the following CSS:

#cat1:checked ~ span.category1 { display:block!important; }
#cat2:checked ~ span.category2 { display:block!important; }
#cat3:checked ~ span.category3 { display:block!important; }

span { display:none; }

For a live demonstration, visit: http://jsfiddle.net/FV2Eq/7/

An explanation of the ~ combinator is provided as well:

The sibling combinator selects elements that are siblings of a specified element. It is less strict than the adjacent sibling combinator (+) as it will select any matching elements following the former selector within the same container.

Therefore, ensure that the elements you want to target are within the same container, as shown in the example above.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Getting the next sibling element with Selenium: A complete guide

Having trouble targeting a textbox after the label "First Name" in a list to enter a first name. Here's what I've tried: WebElement firstNameLocTry = driver.findElement(By.xpath("//label[text()='First Name']/following-sibling::d ...

I am facing difficulties displaying Arabic language characters on my HTML code

I created a website and included the following meta tag in the head section: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> However, all Arabic text appears distorted as shown in the image. Interestingly, when I manually cha ...

Trouble retrieving key value in HTML with Angular and Firebase

When trying to access the key of an object in my database to navigate to a URL based on it, I am finding that the p.$key value is always undefined. service: getAll(){ return this.db.list('/products').valueChanges(); } component: product ...

What are the steps to ensure the effective functioning of my checkbox filter?

Currently, my product list is dynamically created using jQuery. I now need to implement filtering based on attributes such as color, size, and price. I found some code that filters the list items by their classes, which worked perfectly for someone else. ...

Show two <p>'s next to each other

I am trying to arrange 2 paragraphs side by side. <p class = "firstClass">This is the first paragraph.</p> <p class = "secondClass">This is the second paragraph.</p> Result: This is the first paragraph. This is the second paragra ...

What is the most efficient method for implementing uniform rounded corners in HTML/CSS across different web browsers?

Is there a simple way to achieve cross-browser compatibility without a lot of tedious work? I'm looking for a solution that works effortlessly on IE7+, FF2+, and Chrome, without resorting to using tables which may be outdated. Is there a middle ground ...

Steps for dynamically loading the correct pane without having to refresh the header, footer, or left navigation

Looking to create a web application using HTML, Bootstrap, and jQuery that includes a header, footer, left navigation, and right pane. The content of the right pane will be loaded from a separate HTML page based on what is clicked in the left navigation. ...

Is it possible to move between textboxes using arrow keys in HTML?

Is there a way to navigate through textboxes using arrow keys in HTML without relying on jQuery? Possibly utilizing JavaScript, HTML, CSS, or another method? Thank you for your help! <body> <form> <input type="text"&g ...

Scrolling animations do not support the Translate3d feature

I'm struggling to implement a smooth scroll effect on the header of my website. My approach involves using transform:translate3d for animation, with the goal of keeping the header fixed at the top and moving it out of view as the user scrolls down. I ...

Stop users from being able to select or highlight text within a content editable div

Is there a method to develop a content-editable div where users are unable to select or highlight content, but can still input information? I'm interested in creating an interface that forces users to delete and enter data character by character, with ...

Create geometric shapes on Google Maps version 2

Can anyone guide me on how to draw a polygon on Google Maps with user-input coordinates? I have two input fields for latitude and longitude, and when the user clicks the button, I want the polygon to be drawn. The code I currently have doesn't seem to ...

Show the button only when the text is updated

Is there a way to display a button only when the quantity of items in the cart changes, similar to the eBay shopping cart feature? I was able to implement it but it's not functioning as expected. Here is the link to what I have so far. Does anyone kno ...

Utilizing multiple class names in Material UI with identical definitions

When working with traditional CSS, it is common to define shared properties between classes like this: .classA,.classB{ background-color: black; } In Material UI and using theming, the equivalent would be: styles = (theme)=>({ classA:{ ba ...

In the world of MUI, how should one interpret the symbols '&', '>', and '*' when used together?

Currently, I am in the process of building a website using React. To help with this project, I purchased a Material-UI React template. As I was going through the code, I came across the line 4 where it mentions '& > *', and I'm not qu ...

ECharts - Version 3.1.6 Event Plugin

I am looking for advice regarding the management of two charts with reference to echars from Baidu (version 3.1.6). Is there a way to control both charts by engaging in a click event on one of them? In simpler terms, how can I capture and respond to the c ...

Issue with Domsanitizer bypasssecuritytruststyle functionality on Internet Explorer 11 not resolving

CSS:- Implementing the style property from modalStyle in TypeScript <div class="modal" tabindex="1000" [style]="modalStyle" > Angular Component:- Using DomSanitizer to adjust height, display, and min-height properties. While this configuration work ...

transforming a div container into an inline element using CSS

Hey there! I'm facing an issue with CSS where I am trying to change a div tag into inline. <div id="menu1"> <ul> <a href="#"> <li> one</li> </a> <a href="#"> <li> two</li> </a> <a h ...

Modifying css background in real-time based on the current weather conditions

Is there a way to dynamically change the background image in CSS based on the weather condition? I'm utilizing the wunderground API to retrieve the weather data, which is stored in the weather variable. I am struggling with how to update the backgrou ...

The HTML and CSS code I wrote functions perfectly on Codepen, but for some reason, it appears different when I view it in my Chrome environment

My codepen displays perfectly, but when I run the same code on my local environment it looks off. I can't seem to figure out what is causing the difference, especially since I copied and pasted the exact code. Both the codepen and my environment are u ...

Issue with setting innerHTML of element in AngularJS app upon ng-click event

Look at this block of HTML: <div class="custom-select"> <div class="custom-select-placeholder"> <span id="placeholder-pages">Display all items</span> </div> <ul class="custom-select- ...