Question

My html setup is similar to this, the only difference is that my ‘.inner’s are wrapped much deeper (eg. <div><span><div class="inner">aaa</div></div></span>)

<div class="main">
    <div class="inner">aaa</div>
    <div class="main anOtherClass">
        <div class="inner">aaa</div>
    </div>
</div>

my css is:

.main:hover .inner {
    border: 1px solid #000;
}

The problem is, that if I hover onto the first .main all of my .inners get the border. My goal is only to have the first .inner get the border. Is this even possible to do in css?

Answer 1

Use the child selector:

.main:hover > .inner {
    border: 1px solid #000;
}

The > constrains this selector to .inner elements that are a direct child of .main,

SitePoint explains it well: http://reference.sitepoint.com/css/childselector

If you’re certain you only want the first one (in case there are two or more adjacent ones) use :first-child as well:

.main:hover > .inner:first-child {
    border: 1px solid #000;
}