CODEWITHSUNDEEP
htmlcsscss-selectors
Dragos
Dragos

Reputation: 776

CSS overrided rules

I have a little CSS problem.

In my html I have something like this:

<div class='box-div'>
  <div>Entry 1</div>
  <div class='hide'>Entry 2</div>
</div>

In my CSS:

.box-div div {
  display: inline-block;
}

.hide {
  display: none;
}

I want the second nested div to be hidden, but the first rule overrides the second one. How can this be solved?

Upvotes: 3

Views: 116

Answers (5)

AVAVT
AVAVT

Reputation: 7143

Increase the strength of yours to make it stronger than the previous rule:

.box-div .hide {
  display: none;
}

or

div.hide{
   display: none;
}

Upvotes: 5

lharby
lharby

Reputation: 3265

Personally, using a single class of .hidden would be a good solution to hide an element on the page regardless of how it is nested. I would want this class to work anywhere.

So I think it might be better to create a class for dispaly:inline-block which can be reused.

You could specify that the first div inside .box-div always has inline-block as a property, but this is very restrictive.

My solution:

.ib {
  display: inline-block;
}

.hide {
  display: none;
}

<div class='box-div'>
  <div class="ib">Entry 1</div>
  <div class='hide'>Entry 2</div>
</div>

Upvotes: 1

Mohsin Raza
Mohsin Raza

Reputation: 518

There are different ways to do the same.

1 

.box-div {
  display: inline-block;
}

.hide {
  display: none;
}

2

.box-div div{
  display: inline-block;
}

div.hide {
  display: none;
}

3

.box-div div{
  display: inline-block;
}

div.hide {
  display: none;
}

4

.box-div div {
    display: inline-block;
}

.hide {
    display: none !important;
}

Upvotes: 3

Paran0a
Paran0a

Reputation: 3457

.hide.hide  {
  display: none;
}

You can strengthen your specificity by repeating it :)

Upvotes: 2

Yas
Yas

Reputation: 120

It's very easy

HTML:

<div class='box-div'>
  <div>Entry 1</div>
   <div class='hide'>Entry 2</div>
</div>

CSS:

.box-div div {
  display: inline-block;
}

.box-div > div.hide {
  display: none;
}

Try this.

Upvotes: 1

Related Questions