Target
text by internal sibling tag id

Question

So I am using a rust markdown parser and it renders header_ids by placing an <a> tag with an id inside the <h> tags.

So I am getting something like:

<h3>
  <a href="/" id="SOMEID"></a>
  "TEXT"
</h3>

So I want to color the text thats in the <h3> tag by target it by the id thats on the <a> tag. So not target the directly because then I would color all the <h3> tags.

I tried some different css selectors and what not to target it, but nothing worked. Not even sure if thats possible.

Is javascript out of scope? – Nora Söderlund Dec 26 '22 at 22:38 — Nora Söderlund, Dec 26 '22 at 22:38

score 1 · Accepted Answer · answered Dec 26 '22 at 22:22

1

you can try something like that:

h3:has(> #test) {
color: red;
}

<h3>text</h3>
<h3>text <a id="test" href="#">text</a> text</h3>

answered Dec 26 '22 at 22:22

Iłya Bursov

23,342
4
33
57

Beware of [browser compability](https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility). – Nora Söderlund Dec 26 '22 at 22:31
Oh I see that firefox doesn't support this, and :has() is very new to the css space. – Eric Christensen Dec 26 '22 at 22:35
This works but is not the proper way to do it. You clearly state that you don't want to color all H3s by only targeting the A tag and there's better ways to achieve this without using ids, so this answer is misleading imo. – DanielPanic Dec 26 '22 at 22:35
I am not in control of where the text and anchor tags are placed within the
tag; I am at the liberty of the backend markdown parser that chose to render the html this way. The text is not placed inside the tag, its in the
tag that also has an with in an id in it. `
"TEXT"
`
– Eric Christensen Dec 26 '22 at 22:37
You don't need to have control of that in order not to use an ID. Using a suck as h3 a {} will only style the a tag inside of any h3. But I might not be understanding the limitations of your project. – DanielPanic Dec 26 '22 at 23:00

score 0 · Answer 2 · answered Dec 26 '22 at 22:28

Although you can achieve that with some CSS it's not the correct way to do it. IDs should only be used for specific cases or not at all in my opinion. It's fine to use an ID for some Javascript selectors due to performance but for CSS seems like and over kill.

If you want to have the H3 having one color and the A tags inside it just do:

h3 {
  color: black;
}

h3 > a {
  color: red;
}

<h3>
This is a title
</h3>

<h3>
This is a title <a href="/">with some anchor</a>
</h3>

If you want only that particular A tag of that H3 to change color, then use a class instead like so:

h3 {
  color: black;
}

h3 > .anchor {
  color: red;
}

<h3>
  This is a title
</h3>

<h3>
  This is a title <a href="/" class="anchor">with some anchor</a>
</h3>

If you are using an ID in order to create an anchor link to that ID that's fine, but you should not use CSS selectors to attribute CSS Styles to something as trivial as an A tag.

score 0 · Answer 3 · answered Dec 26 '22 at 22:41

If JavaScript isn't out of scope, you can query regularly for h3 a and then use the parentElement to assign the styling:

const linksWithH3 = document.querySelectorAll("h3 a");

for(let index = 0; index < linksWithH3.length; index++) {
  const parentElement = linksWithH3[index].parentElement;
  
  parentElement.style.color = "red";
}

<h3>
  <a href="/" id="SOMEID"></a>
  "TEXT"
</h3>

Or you can introduce a class:

const linksWithH3 = document.querySelectorAll("h3 a");

for(let index = 0; index < linksWithH3.length; index++) {
  const parentElement = linksWithH3[index].parentElement;
  
  parentElement.classList.add("h3-with-a");
}

.h3-with-a {
  color: red;
}

<h3>
  <a href="/" id="SOMEID"></a>
  "TEXT"
</h3>

Target text by internal sibling tag id

text by internal sibling tag id

3 Answers3

tag; I am at the liberty of the backend markdown parser that chose to render the html this way. The text is not placed inside the tag, its in the tag that also has an with in an id in it. `"TEXT"`

tag that also has an with in an id in it. `"TEXT"`

"TEXT"

Target
text by internal sibling tag id

tag; I am at the liberty of the backend markdown parser that chose to render the html this way. The text is not placed inside the tag, its in the
tag that also has an with in an id in it. `
"TEXT"
`

tag that also has an with in an id in it. `
"TEXT"
`