0

I'm trying to use the contains selector in css and the first child selector together and can't get it to work. It works without the :first-child selector which makes me think maybe its just not possible? For my example below I only want the first p with the id of taco to have a background-color of yellow.

<!DOCTYPE html>
<html>
<head>
<style>
p[id*="taco"]:first-child {
  background-color: yellow;
}
</style>
</head>
<body>

<p>This paragraph is the first child of its parent (body).</p>
<p>This paragraph is not the first child of its parent (body).</p>
<p>This paragraph is the first child of its parent (div).</p>
<p>This paragraph is not the first child of its parent (div).</p>
<p id="taco">This paragraph is the first child of its parent (body).</p>
<p id="taco">This paragraph is not the first child of its parent (body).</p>
<p id="taco">This paragraph is the first child of its parent (div).</p>
<p id="taco">This paragraph is not the first child of its parent (div).</p>


</body>
</html>

I tried to use both selectors. I tried using the first child without the contains selector and it worked. I also tried to use the contains selector without the first child selector and that works but using them together doesn't.

Ben Smallwood
  • 3
  • 1
  • this is just a suggestion: you can use `p#taco` instead, which is better than `[id*="taco"]` also class is better – Laaouatni Anas Jan 06 '23 at 19:47
  • 1
    First, IDs must be unique on the page. Can't use more than one of the same (for the code to be valid). Use classes instead. – Michael Benjamin Jan 06 '23 at 19:51
  • You're violating the protocol/standard by having multiple #ID's. Once you fix that, you should find an easy solution – Ronnie Royston Jan 06 '23 at 19:53
  • Note to respond to these comments: taco is just a stand in the actual ID are all unique like #context_write, #context_read, #context_get. So my selector is actually [id*="context"]. I would add a class to the elements but i'm writing css to alter a 3rd party dashboard and don't have access to the code. – Ben Smallwood Jan 06 '23 at 20:31

2 Answers2

0

You'll need two rules.

The first targets the element to modify.

The second keeps the following elements unchanged.

p.taco {
  background-color: yellow;
}

p.taco ~ p {
  background-color: white;
}
<p>This paragraph is the first child of its parent (body).</p>
<p>This paragraph is not the first child of its parent (body).</p>
<p>This paragraph is the first child of its parent (div).</p>
<p>This paragraph is not the first child of its parent (div).</p>
<p class="taco">This paragraph is the first child of its parent (body).</p>
<p class="taco">This paragraph is not the first child of its parent (body).</p>
<p class="taco">This paragraph is the first child of its parent (div).</p>
<p class="taco">This paragraph is not the first child of its parent (div).</p>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Thanks! This didn't answer my question that I asked BUT it did give me an alternative solution to my problem so thank you so much! – Ben Smallwood Jan 06 '23 at 20:39
0

It actually does work.

What it does is just not what you would expect. CSS is looking for an element which is both :first-child and [id*="taco"].

You don't have any first-child containing taco in the id.

<p>This paragraph is the first child of its parent (body).</p>

doesn't contain taco in the id.

Not sure what exactly you are trying to do but I guess you rather wanna get the first element with a certain id than the :first-child. Id's however should remain unique so I would recommend using a class instead.

Therefore you look for something like the :first-of-type pseudo selector, though this answer explains why it might also not work as you would expect with other parameters. I hope this does actually help you find a solution for your main problem.

Tim Nikischin
  • 368
  • 1
  • 18