Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use css first-child with :not() [duplicate]

There is a parent div with id = "cooldiv". It has many div elements inside. Now I need to set a css property to all the child div-s except the first one.

So, this is what I've tried so far to accomplish this task:

#cooldiv .row:not(first-child) {
    top: -50px;
}

But, of course, it didn't work out. What's wrong here? This is the screenshot of the source code:

enter image description here

like image 574
TyForHelpDude Avatar asked Apr 07 '17 13:04

TyForHelpDude


People also ask

How do you select the first child in CSS?

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

How do I select not the first child in CSS?

This selector is used to select every element which is not the first-child of its parent element. It is represented as an argument in the form of :not(first-child) element. Explanation: The above example shows that a <div> is a container Tag.

How do I apply only the first element in CSS?

The :first-of-type selector in CSS allows you to target the first occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

How do I select all except first child CSS?

By using the :not(:first-child) selector, you remove that problem. You can use this selector on every HTML element. Another common use case is if you use an unordered list <ul> for your menu.


1 Answers

Try #cooldiv .row:not(:first-child). It seems you missed : before first-child. Maybe that's why it doesn't function?

like image 57
curveball Avatar answered Sep 21 '22 11:09

curveball