-1

I have other company's html, show three lines:

    <div class="classA classB classC">A_display</div>
    <div class="classB classC">B_no_display</div>
    <div class="classC">C_no_display</div>

I need A_display display, and let B_no_display\C_no_display hide.

The classA, classB, classC's name is known and the class combination will not change.

Can I use CSS selector make it? Like using this css:

.classA .classB .classC{
  /* todo how to display A_display, don't display B_no_display C_no_display*/
  /* display: inline !important;*/
}
.classB .classC {
  display: none;
}
.classC {
  display: none;
}

Then the page show only one line:

    A_display
acaleph
  • 23
  • 5
  • 3
    a space between selectors will look for descendants. if you want to select elements having those classes you should omit the whitespace `.classA.classB.classC` [descendant combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator) – Diego D Jan 31 '23 at 09:30

2 Answers2

1

You have to remove the whitespace between class names like .classA.classB.classC

.classA.classB.classC {
  display: inline !important;
}

.classB.classC {
  display: none;
}

.classC {
  display: none;
}
<div class="classA classB classC">A_display</div>
<div class="classB classC">B_no_display</div>
<div class="classC">C_no_display</div>
Charles Lavalard
  • 2,061
  • 6
  • 26
1

Yes, CSS selectors can be used to hide specific elements based on their class combinations. The updated CSS code to achieve the desired result is as follows:

.classA.classB.classC {
  display: block;
}

.classB.classC {
  display: none;
}

.classC {
  display: none;
}

This will make the A display element visible while hiding the B no display and C no display elements. CSS selectors check each element for the exact class combination, and the display property is used to show or hide the elements.

2MuchC0ff33
  • 156
  • 4