Css except first child

Css Selector for a class except the first element

I want to apply a border to all the children divs with (.child), except the first one. so in the end all the children divs except (.different_class) and (.child:eq(0)) (I don’t want to use nth-child as in the real problem I might not have .different_class div) will have the border. I think the solution might be to use :not() selector, but I’m not quite sure how. Thanks’

3 Answers 3

#container div.child + div.child

Why does not work? Check this jsfiddle.

This doesn’t work, «so in the end all the children divs except (.different_class) and (.child:eq(0))» thanks anyway

@Alvaro please see the update. Although I see now that you do not ask for the nth-child, it still works. Only tested with Chrome though.

+ selector will work in this case because all elements that have child class are together but it would not work if another different element (or with another class) will be between them.

This happens because + selector will match all elements that are placed immediately after another div.child .

#container div.child + div.child

 
Test
 
Test
 
Test
 
Test
 
Test
 
Test
 

To avoid that, we can use ~ selector, that will match all elements that are preceded by div.child , not necessary that it will be immediately after it. So it will not match the first div with child class but will match the rest of divs with child class without take in consideration the rest of elements.

#container div.child ~ div.child

Источник

CSS select all child elements except first two and last two

I’m very curious (that’s all) to see how you would select all children of an element except the first two and last two. I’ve a method, but it’s nasty and unreadable. There must be a much clearer method that doesn’t need 8 pseudo-selectors.

:not(:nth-child(1)):not(:nth-child(2)):not(:nth-last-child(1)):not(:nth-last-child(2))

Yeah, that’s pretty horrible. It literally selects all elements that are :not the first or second first or last. There must be a method that uses 2 as a semi-variable, instead of piling on pseudo-selectors. I thought of another one (still messy):

:not(:nth-child(-1n+2)):not(:nth-last-child(-1n+2))

3 Answers 3

You don’t even need :not() . :nth-child(n+3):nth-last-child(n+3) works fine.

I don’t see any other option than using :nth-child and :not(:nth-last-child) .

My version: hr:nth-child(n+3):not(:nth-last-child(-n+2))

According to :nth-child reference:

The :nth-child CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element.

In other words, this class matches all children whose index fall in the set < an + b; ∀n ∈ N >.

So nth-child(n+3) matches all elements, starting from the third one.

:nth-last-child works similar, but from the end of element collection, so :nth-last-child(-n+3) matches only 2 elements starting from the end of collection. Because of :not these 2 elements are excluded from selector.

Источник

selecting all siblings except first

Is there a CSS selector that selects the compliment of .a + .b with respect to .a ~ .b ? In less mathy terms, I want to select all sibling elements that succeed an element, excluding its first sibling successor. For example, in all dl lists, I have all dd elements colored a certain color. But in inline dl lists, I want to keep the first dd following a dt the same color, but all subsequent dd s will be changed to another color. Below is my code, which is clearly not DRY. Is there a way to do it without re-defining the color again?

/* dl lists contain dd terms all colored light aqua */ dl > dd < background-color: #c0ffee; >/* inline dl lists have dd terms displayed inline and colored yellow-green */ dl.inline > dd < display: inline; background-color: #bada33; >/* however, in an inline dl list, the first dd succeeding a dt is colored normally */ dl.inline > dt + dd

You could assign the green style to ALL dds and reset this for the first-child of them. Please check out the «first-child» selector discription at w3.org/TR/css3-selectors/#first-child-pseudo

According your wish to DRY code, you can enumerate multiple selectors which will be styled the same way. Just list them comma separated like dl > dd, dl.inline > dt + dd < background-color: #c0ffee; >

@dsuess dd:first-child only selects the dd if it is the first child of the parent. If the element I want is not the first child, it won’t select it. A very common mistake a lot of people make is to think that dd:first-child will select the first dd child. It’s easy to get confused by that.

Источник

Not to Select the First Child in CSS

1. Use the :not(selector) Selector Not to Select the First Child in CSS
2. Style the First Child Individually Using the :first-child Selector Not to Select the First Child in CSS

In this article, we will learn how to utilize CSS Selectors not to select the first child.

Use the :not(selector) Selector Not to Select the First Child in CSS

We can use the :not(selector) selector to select every other element that is not the selected element. So, we can use the selector not to select the first child in CSS. We can use :first-child as the selector in the :not(selector) selector. In this way, we can apply styles to all the descendants of an element except the first one. Here, in browsers with CSS Selectors level 3 are supported, we can use the :not selector.

For example, create the body tag in HTML. Then, write three p tags and write some content of your choice between the tags. In CSS, select body p:not(:first-child) and set the color to red .

Here, in the snippet below, we can see that the body contains paragraphs, and all of them have their font color set as red except the first one. Thus, we can select all the children except the first child and apply styles. The :not selector, however, has certain limitations ( such as it can only process simple selectors as argument).

body>  p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.p>  p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.p>  p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.p>  body> 

body p:not(:first-child)   color: red; > 

Style the First Child Individually Using the :first-child Selector Not to Select the First Child in CSS

We can set specific rules that override the rule previously set using the :first-child selector. By this technique, we can style all the children except the first child. Overriding the styles using the :first-child selector will make the first child appear different from the other children.

For example, use the same HTML structure as in the first method. In CSS, select the p tag and set the color to blue. Next, select the first child as body p:first-child and then set the color to black .

Here, the default style for the paragraphs except the first one is set as color: blue , whereas it is overridden by color: black using the :first-child selector. Thus, we can use the :first-child selector not to select the first child.

p  color:blue; >  body p:first-child   color: black; > 

body>  p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.p>  p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.p>  p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.p>  body> 

Источник