Css - how to select the first three HTML elements whose "href" contains a specific word?

Question

0.00/5 (No votes)

See more:

I have the following HTML elements:

HTML

<p><a href="[someUrl]/about">Text...</a></p>
<p><a href="[someUrl]/info">Text...</a></p>

<p><a href="[someUrl]/blog/1">Text...</a></p>
<p><a href="[someUrl]/blog/2">Text...</a></p>
<p><a href="[someUrl]/blog/3">Text...</a></p>

<p><a href="[someUrl]/blog/4">Text...</a></p>
<p><a href="[someUrl]/contacts">Text...</a></p>

Using CSS, how can I select only the first three elements whose "href" contains the word "blog"?

I can't add class/ids to HTML code.

What I have tried:

CSS

[href*="blog"]:nth-of-type(-n+3) {
  background-color: red;
}

But it selects all the four elements whose "href" contains the word "blog".

Posted 26-Nov-23 2:16am

LB2371

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Mike Hankey · Answer 1 · 2023-11-26T02:46:00

Solution 1

According to this :nth-child | CSS-Tricks - CSS-Tricks[^]

looks like this will work

CSS

[href*="blog"]:nth-child(-n+3) {
  background-color: red;
}

[Update]
Went to W3Schools Tryit Editor[^]
and this seems to work

CSS

<!DOCTYPE html>
<html>
<head>
<style>
[href*="blog"]:nth-child(-n+5) {
  background-color: red;
}
a { display: block}
</style>
</head>
<body>

<div>
<a href="[someUrl]/blog/1">Text...</a>
<a href="[someUrl]/about">Text...</a>

<a href="[someUrl]/info">Text...</a>
<a href="[someUrl]/blog/2">Text...</a>
<a href="[someUrl]/blog/3">Text...</a>

<a href="[someUrl]/blog/4">Text...</a>
<a href="[someUrl]/contacts">Text...</a>
</div>
</body>
</html>

Posted 26-Nov-23 2:46am

Mike Hankey

Updated 26-Nov-23 11:02am

v2

Comments

LB2371 26-Nov-23 8:54am

That's just what I've already tried, but it selects all the 4 elements whose "href" contains the word "blog" (using Firefox).

M-Badger 26-Nov-23 16:27pm

Have you tried -n+2 to check that it is not zero based ?

LB2371 26-Nov-23 17:28pm

That's not the HTML code of my question.

Mike Hankey 26-Nov-23 17:42pm

If you would have googled the :nth-child or nth-of-type you would have found that they select siblings of a common parent. Your code did not have a common parent so the [href*="blog"] selected all the hrefs with blog as an attribute and ignored the nth part.

My way gave the code a common parent by removing s, the div may not be necessary, you can try it on the site link that I gave you.

If the code has to be exactly as you have it, good luck!

LB2371 26-Nov-23 17:46pm

The code has to be exactly as I have it - That's the reason of my question here.

Richard Deeming 28-Nov-23 5:54am

Assuming the <p> elements are all siblings, and only contain a single <a> element, then you could try:

p:has(a[href*="blog"]):nth-child(-n+5) a {
	background-color: red;
}

:has() - CSS: Cascading Style Sheets | MDN[^]

NB: Firefox is the only major browser which doesn't currently support the :has selector. Support will be included in v121, which will be released on 19th December.

Mike Hankey 28-Nov-23 7:11am

I'm impressed

LB2371 28-Nov-23 9:10am

Thanks!