相邻的兄弟选择器CSS

Question

I have 2 elements inside my Div,both have same class name ,I want to hide my first element with the class name .cart .I am using the below code.

.component-bottom  .component-basket + .cart{
     display:none;
}

I have added my html structure:

<div class="component-bottom">
  <div class="component-basket">
    <div class="cart">
    </div>
    <div class="cart">
    </div>
  </div>
</div>

Am i using correct code?

Please advice me..

Answer 1

You can use a direct child selector for the .cart element:

.component-bottom .component-basket > .cart
{
     display:none;
}

Now you only want the first element of this selector. There isn't an original selector for this, but you can make a overwrite selector for this.
You can overwrite all but the first one ElementA ~ ElementB :

.component-bottom .component-basket > .cart ~ .cart
{
    display:block;
}

This search for all .cart elements inside .component-basket where ANY previous adjacent sibling is .cart . The first of the element doesn't have a previous sibling of this class, so it would not be selected.

This is called a general sibling selector .

jsFiddle

This should support IE7 and above:

Note Requires Windows Internet Explorer 7 or later.

source: http://msdn.microsoft.com/en-us/library/ie/aa358824(v=vs.85).aspx

---

an easier solution commented by @jrConway:

Make it display: block by default and use:

.component-bottom .component-basket > .cart:first-child
{
     display: none;
}

Example

Note that this only work when you use ONLY .cart as child element. Whenever an other class is at the first 'place' it will not work.

Answer 2

Using adjacent sibling selector won't work here, as your element is nested inside .component-basket and hence it fails.. Simple way is to call a class on the element you want to hide, if you cannot change the DOM than you can use first-child or nth-of-type(1)

.component-bottom .component-basket div.cart:nth-of-type(1) {
     display:none;
}

Demo

---

As @Vucko already commented, nth-of-type() is a CSS3 spec pseudo.. Hence if you want to support legacy browsers, you can use Selectivizr , this will save you a lot of classes/ids.

Answer 3

As understood, check this might help

CSS

.cart{
    display:none;
}

.component-bottom  .component-basket
{
    //some common properties
}

HTML

<div class="component-bottom">
    <div class="component-basket cart">component-basket Hidden div</div>
    <div class="component-basket">component-basket visible div</div>
</div>

This will hide the div with the cart class (the First div)

Thanks,

Dhiraj

Answer 4

Stick this in your CSS file:

.hide {
    display: none;
}

Then add that class to whatever element you want hidden like so:

<div class="component-bottom">
    <div class="component-basket">Foo</div>
    <div class="component-basket cart hide">Foo</div>
</div>

The advantage of this method is that you get to re-use that "hide" class anywhere you want.