How do I get CSS code [class^="sz"] to work

rblampain · 12-08-2023, 09:04 AM

I have scattered in a large text web page a large number of small sections of text that need to be shown or hidden individually and I only have a very rudimentary knowledge of CSS.
These sections are given ID 'sz1' to 'sz99' and I understand I should use CSS code like:

Code:

[class^="sz"] { 
}
[class$="n"] (n being a number)

to show or hide each.

Almost every combination I have tried results in all of the individual bits of text showing/hiding or those that follows from the one that is currently 'clicked'.
(I have tried the code below using checkboxes instead of radio buttons.)

Can someone tell me what is a correct code for this? I simply can not figure how [class^="sz"] works despite hours of searching on the internet.
All info I have found is about applying the same effect on all.

Code:

css
===
input#show, input#hide {
    display:none;
}

span#sz1 {
    display:none;
}
input#show:checked ~ span#sz1 {
  display:block;
}

input#hide:checked ~ span#sz1 {
    display:none;
}
</style>

html
====
<label for="show">
    <span>[Show]</span>
</label>
<input type=radio id="show" name="group">
<label for="hide">
    <span>[Hide]</span> 
</label>    
<input type=radio id="hide" name="group">
<span id="sz1">
Some content here.
</span>

The HTML part is repeated as many times as there is a text segment starting with ID "sz".

Thank you for your help.

michaelk · 12-08-2023, 08:53 PM

My CSS knowledge isn't very good either.

The different wildcards are ^ i.e. starts with, * contains and $ ends with. Regardless of using wildcards if you select one you select all so I don't know of anyway except for having a css definition for each radiobox.

Code:

<html>
<head>

<style>
[id^="show"], [id^="hide"] {
    display:none;
}

[id^="sz"] {
    display:none;
}

[id="show"]:checked ~ [id="sz1"] {
  display:block;
}

[id="hide"]:checked ~ [id="sz1"]  {
    display:none;
}

[id="show1"]:checked ~ [id="sz2"] {
  display:block;
}

[id="hide1"]:checked ~ [id="sz2"]  {
    display:none;
}
</style>
</head>
<body>
<label for="show">
    <span>[Show]</span>
</label>
<input type=radio id="show" name="group">
<label for="hide">
    <span>[Hide]</span> 
</label>    
<input type=radio id="hide" name="group">
<span id="sz1">
Some content here.
</span>
<br> <br>
<label for="show1">
    <span>[Show]</span>
</label>
<input type=radio id="show1" name="group1">
<label for="hide1">
    <span>[Hide]</span> 
</label>    
<input type=radio id="hide1" name="group1">
<span id="sz2">
Some content here 2.
</span>
</body>
</html>

rblampain · 12-09-2023, 12:04 AM

Thank you for the answer.
My question is misleading because while the wildcards ^ and $ are both used in the code, only the wildcard $ is used to toggle visibility.

Quote:

Regardless of using wildcards if you select one you select all so I don't know of anyway except for having a css definition for each radiobox.

According to my understanding, that is not correct. Using

Code:

[class^="sz"]

Will select every ID starting with 'sz' of which there may be 99 while using

Code:

[class$="z1"]

will select any ID ending with 'z1' of which there will only be 1.

I know I have to use

Code:

[class$="n"]

when n is the ID number previously mentioned which may, in my example, be 1 to 99.
What I fail to figure out is how to link the code together so that any ID starting with "sz" does something and only the one ending with a number between 1 and 99 has visibility toggled.

rblampain · 12-09-2023, 02:44 AM

It looks like michaelk is correct, I was already using the solution proposed which works.
What I tried to do is not possible with CSS and JS is not an option, so my CSS has very long lines of IDs.