How to show elements with several classes

HTML & CSS
1

I use successfully this css code to show selectively a glossary webpage (you can see it here):

css

 #classa:target ~ #list .teol,
 #classa:target ~ #list .stor,
 #classa:target ~ #list .carabelta,
 #classa:target ~ #list .digit,
 #classa:target ~ #list .mondooggi,
 
 #classb:target ~ #list .filos,
 #classb:target ~ #list .cultn,
 #classb:target ~ #list .stor,
 #classb:target ~ #list .carabelta,
 #classb:target ~ #list .digit,
 #classb:target ~ #list .mondooggi,
 
 #classc:target ~ #list .teol,
 #classc:target ~ #list .filos,
 #classc:target ~ #list .cultn, 
 #classc:target ~ #list .carabelta,
 #classc:target ~ #list .digit,
 #classc:target ~ #list .mondooggi,
 
 #classd:target ~ #list .teol,
 #classd:target ~ #list .filos,
 #classd:target ~ #list .cultn, 
 #classd:target ~ #list .stor,
 #classd:target ~ #list .digit,
 #classd:target ~ #list .mondooggi,
 
 #classe:target ~ #list .filos,
 #classe:target ~ #list .cultn,
 #classe:target ~ #list .stor,
 #classe:target ~ #list .carabelta,
 #classe:target ~ #list .teol,
 #classe:target ~ #list .mondooggi,
 
 #classf:target ~ #list .filos,
 #classf:target ~ #list .cultn,
 #classf:target ~ #list .stor,
 #classf:target ~ #list .carabelta,
 #classf:target ~ #list .teol,
 #classf:target ~ #list .digit
 {
  display: none;
 }

html

 <p>show only: <a class="my-toggle" href="#classa">voci filosofiche</a> | <a class="my-toggle" href="#classb">voci teologiche</a> | <a class="my-toggle" href="#classc">voci storiche</a> | <a class="my-toggle" href="#classf">voci di attualitĂ </a> | Mostra <a class="my-toggle" href="#classx">tutto</a></p>
 </div>

   <div class="destination" id="classa"></div>
   <div class="destination" id="classb"></div>
   <div class="destination" id="classc"></div>
   <div class="destination" id="classf"></div>
   <div class="destination" id="classx"></div>

My problem is what should I do to show an element with several class (clicking on any of them). I mean <div class="filos teol"> should be visible both clicking on filos [=classa] and teol [=classb].
So far I cannot use that code <div class="filos teol">, because in that case the content of that element would be not visible neither clicking on “teol” nor on “filos”.

2

I’m struggling a bit to understand what you’re trying to do, because you’re not showing us the thing that actually does the toggling.

the class attribute in an element is actually a list, so something that has class="filos teol" has both classes “filos” and “teol”, and will match a selector looking for either.

.filos {
  color: red;
}
.teol {
   font-weight:bold;
}
.filos.teol {
   text-decoration: underline
}

<div class="filos">Only filos</div>
<div class="teol">Only teol</div>
<div class="filos teol">Both</div>

https://codepen.io/EtoileLion/pen/KwKXYEY

1 Like
3

Thank you. Sorry for my incomplete explain.
The aim of that code (suggested by someone of you) was to be able (via css only) to select and show some divs (with a given class).
If you see that url you can see how it works. The website is in Italian but clicking on internal links at the top of the page (i.g. voci teologiche |you can see only the theological terms of the glossary.
My problem arise from glossary items that are multi-class (a same term can be both teological and philosophical), and with the original code if I set a div with both the classes "teol filos", it disappear.
My question was how to fix this. Because so far, clicking i.g. https://www.culturanuova.net/glossario.php#classf you see some titles (such as “Abito”) without any content.

4

So… i’m going to use the last link you gave - classf.

I’m also going to look specifically at the first three divs of your glossary. (I’m gonna cut out all the text bits, but you can see the structure)

 <div id="abito">
  <h2 id="heading_toc_j_1" tabindex="-1">abito</h2>
  <div class="filos">
  ...
  </div>
  <div class="teol">
     ...
  </div>
 </div>
 <div id="accidenti" class="filos">
  <h2 id="heading_toc_j_2" tabindex="-1">accidenti</h2>
  <p>...</p>
 </div>
 
 <div id="America" class="mondooggi">
  <h2 id="heading_toc_j_3" tabindex="-1">America</h2>

  <p>...</p>
   ...
 </div>

Your instructions to the page are “Hide everything with class teol, filos, mondooggi” (and others, but for the purposes of this, it doesnt matter), and then for page with anchor classf “show anything with class mondoogi.”

If you look at that HTML structure, can you see why you see “Abito” but not “accidenti”?

(And yes, i know this isnt a fix yet, but i want you to see the why, before we decide how to fix it)

1 Like
5

Thank you. I think that the reason is that classf show elements with ‘mondooggi’ class and hide any other element (within #list container) with some class, except elements with no class, and abito doesn’t have a class, while accidenti does have one (filos).

1 Like
6

Exactly so.

So right now, your glossary entries have two different display styles.

You’ve got the entries with no class, which look like this:

image
image215×132 5.81 KB

and the entries that do have a class, which look like this:

image
image152×121 4.73 KB

You should make all of the headings look the same (either all with a bar beside them, or none of them with a bar beside them)… which is the ‘correct’ display? (this is a style choice, so its up to you.)

1 Like
7

That seems a bit over the top to me. If instead you added a common class to all you could hide them all with one rule and then just show the ones you want.

e.g. A very shortened version using a class of hide added to all.

https://codepen.io/paulobrien/pen/yyLPypZ/482b2f6b9a647834537101fcf74bae4e


#classa:target ~ #list .hide:not(.filos){
  display: none;
}
#classb:target ~ #list .hide:not(.teol) {
  display: none;
}

etc...

This code .hide:not(.filos) will hide all the divs with a class of .hide except for any that have a class of filos. It will show any div that has a class of filos as part of a multiple classes.

2 Likes
8

Thank you Paul. I will work with your suggested code. And I will say something.

EDIT

And adding .hide class it’s really necessary?

EDIT

Yes, it is!
And it seems work (I had to change the name .hide, already definied, in .common) :slightly_smiling_face:
Some further attempts, but it seems the right direction.

1 Like
9

well done, Paul! :smiley:
Thank you very, very much!

1 Like
10

A last small detail: to beautify the result I’d like avoid the double border when I have filos teol as class.
Maybe creating a new class style with a(n external) border both the colors of filos and teol … but how?

11

Hi, I’m only on a mobile at the moment so can’t look at your css but you can style the element based on 2 classes using a dot separated list.

e.g.


.filos.teol{border:1px solid red}

Unless you meant something else?

Back online tomorrow now.

1 Like
12

Or perhaps you meant this with your new structure?

.filos.teol .filos,
.filos.teol .teol{
    border:none;
}
1 Like
13

Yes, indeed I myself had reached almost the same conclusion :slightly_smiling_face: .
Thank you so much!

1 Like