Question 45640 in CSS Question posted in
Some basic documentation can be found here.

How to hide html element by specific class combination? – CSS

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_displayC_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
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search