How to select first child of sibling in CSS

Question

I created several child elements with different classes and I need to select first child element with specific classname which is sibling of another child element with different calssname. How to select all first and last children after some specific sibling?

I tried to select last-child and first-child, but worked only last child, first child is not selected

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1>hello</h1>
    <div class="parrent">
        <div class="child2">child2</div>
        <div class="child1">child1</div>
        <div class="child2">child2</div>
        <div class="child2">child2</div>
        <div class="child2">child2</div>
        <div class="child1">child1</div>
        <div class="child1">child1</div>
        <div class="child2">child2</div>
        <div class="child2">child2</div>
    </div>
</body>
</html>

CSS

.parrent>div {
    color: green;
}

.child1 ~ .child2:first-child {
    color: red;
}

.child1 ~ .child2:last-child {
    color: red;
}

I expected to select all first and last children of .child2 which are sibling to (which are stay after) .child1

But I got:

@MihaiT, no it is not, here is different situation – bek Oct 18 '19 at 12:33 — bek, Oct 18 '19 at 12:33

score 1 · Answer 1 · answered Oct 18 '19 at 12:27

1

There is no selector that will do that.

:first-child means "The first child of the parent element" not "The first child of the parent element that also meets some other conditions".

You could do something like:

.child1 ~ .child2 {
    color: red;
}

.child1 ~ .child2 ~ .child2 {
    color: green;
}

i.e. Change all subsequent child2s to red and then override that for the ones subsequent to the first matching child2.

answered Oct 18 '19 at 12:27

Quentin

914,110
126
1,211
1,335

The order of elements can be different, and how to change style of last child `.child2` after `.child1`? – bek Oct 18 '19 at 12:29
Possibly your display logic is just not what CSS is designed to handle and you should write JS to add new classes to your DOM in order to express it. – Quentin Oct 18 '19 at 12:33
And saying _not "The first child of the parent element that also meets some other conditions"_ is actually not accurate, as if that element is of a different type, the outcome will be different (which you'll see if the `child2` were e.g. a `p`) – Asons Oct 18 '19 at 12:56
@LGSon — No. Given: `
` then `p:first-child` won't match anything. The `p` is the second child. It is not the first child. There is no selector that says the first child that is a p. (`p:first-child` says the first-child if it is *also* a p) – Quentin Oct 18 '19 at 12:58
Oh yes, I'd forgotten about first-of-type. But that is a *specific* other condition and not one that solves the problem the OP is asking about (which is class names). There isn't one for arbitrary other conditions. And its nice that you found obvious duplicates. I didn't. – Quentin Oct 18 '19 at 13:23

How to select first child of sibling in CSS

1 Answers1