CODEWITHSUNDEEP
csscss-selectors
Andrés Orozco
Andrés Orozco

Reputation: 2671

:not() selector on CSS

I have a problem with the :not() selector on CSS.

I have this code:

<div class="group">
    <div role="layer" class="one">Layer</div>
    <div role="layer" class="two">Layer</div>
    <div role="layer" class="three">Layer</div>
    <div role="layer" class="four">Layer</div>
</div>

and this CSS:

div[role="layer"]{
    width: 100px;
    height: 25px;
    border: 1px solid red;
    border-radius: 5px;
    float: left;
}

.group > [role="layer"]:first-child{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.group > [role="layer"]:last-child{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.group [role="layer"]:not(:first-child){
    border-radius: 0;
}

JSFiddle Example

What I want to do is to make the first and last layer to have rounded corners but not the other layer. As you can see I can make the first layer not to have a border radius, but when the :not(:first-child) selector is applied, it makes the last layer to change.

If someone can understand my point, I'd really appreciate your help.

Upvotes: 2

Views: 127

Answers (2)

Michael Teper
Michael Teper

Reputation: 4651

I think you need 2 changes here:

  1. Move the last CSS declaration (the one with :not) up above the :last-child declaration (in CSS order matters)

  2. Replace

    .group > [role="layer"]:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

    with

    .group > [role="layer"]:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

Upvotes: -1

lonesomeday
lonesomeday

Reputation: 238045

What you want to do is say "layers that are neither the first child nor the last child should have border-radius: 0". You can achieve this by having multiple :not() selectors:

.group [role="layer"]:not(:first-child):not(:last-child){
    border-radius: 0;
}

Updated jsFiddle

Upvotes: 5

Related Questions