user3337457
user3337457

Reputation: 23

How to hide a class on specific page using css

I would like to hide the bullet point class="det_price" on the page "sale" only. Can someone tell me how to do it using css.

Here is an example of the code:

<body id="sale">
...
<li class="det_price">
</li>
...

Upvotes: 2

Views: 20793

Answers (5)

MikesBarto2002
MikesBarto2002

Reputation: 173

All of the answers work above, but you have to decide whether you want the information that is being "hidden" to stay in the HTML or be completely removed from the DOM. Display: none; will completely remove it, where visibility: hidden; will just hide it from the view of the visitor, but will keep the code in the DOM. There is a big difference between the two.

Upvotes: 0

Kheema Pandey
Kheema Pandey

Reputation: 10285

to hide the bullet point you could try like this..

 <div id="sale">
  <ul>
    <li class="det_price">test</li>

  </ul>
  </div>

and CSS should be like this

#sale>ul>li.det_price{list-style-type:none; color:red;}

here is the working Demo

http://jsbin.com/miciyuqi/1/edit

Upvotes: 0

Nitesh
Nitesh

Reputation: 15779

If you want to hide, use visibility property with hidden value. This will hide it.

For Instance,

#sale .det_price {
    visibility: hidden;
}

Hope this helps.

Upvotes: 0

Dan
Dan

Reputation: 9847

Add this CSS rule:

#sale .det_price {
    display: none;
}

Upvotes: 3

Miqdad Ali
Miqdad Ali

Reputation: 6147

#sale .det_price{display:none;}

Upvotes: 1

Related Questions