CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Complexity
Complexity

Reputation: 5820

Apply hover on all elements except the first

I have various elements and when I hover them, I want all of them to have a background with the exception of the first child.

Here's my CSS selector:

#OfficeUI .iconHolder img:hover:not(:first-child) { background-color: #CDE6F7; }

What's wrong with this?

Relevant HTML

        <div class="officeui-position-absolute iconHolder">
            <!-- Provides the images on the top left of the ribbon. -->
            <top-Images-Container>
                <span ng-repeat="icon in icons">
                    <img src="{{icon.Icon}}" />
                </span>
            </top-Images-Container>    
        </div>

Upvotes: 0

Views: 2550

Answers (3)

joy
joy

Reputation: 122

alternatively, you can use: 

    #OfficeUI .iconHolder img:nth-child(n + 2):hover

Upvotes: 0

transcranial
transcranial

Reputation: 381

You can use the nth-child selector. n+2 makes it select all but the 1st element.

li:nth-child(n+2):hover {
    color:red;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

Upvotes: 2

Pavel Parshin
Pavel Parshin

Reputation: 517

p:not(:first-child):hover {background-color: red;}
<p>first</p>
<p>second</p>
<p>third</p>

Upvotes: 4

Related Questions