Use css for only one URL

Question

Can I target a css class for only one URL on my wordpress site?

.class a {pointer-events:auto;}
.class a[href="URL"]{pointer-events: none;}

This isn't working, is there another way?

Can I do this with javascript?

I need to disable the Add to cart button for a page with a sample part (something that shouldn't be added to cart).

The only other unique attribute is data-product_id="32570"

is there a way to target data-product_id="32570" in css?

Thank you for your reply, Perhaps I did not explain well enough. I am attempting to disable the add to cart button on this page partsonline.diamedicalusa.com/results/keyword/Search+For+Parts/… However you can only view the price if you are logged in. — RobBenz
– RobBenz, Commented Apr 22, 2015 at 19:32
Given the browser support for pointer-events and that people may view your site with CSS disabled, you might want to consider a different solution, such as a conditional in your server side code. — Shaggy
– Shaggy, Commented Apr 22, 2015 at 19:33
You should target it by that unique attribute developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors — Huangism
– Huangism, Commented Apr 22, 2015 at 19:33
Are you sure the URL in your a element is exactly the same as a[href="URL"]? You can also change href= to href*= , so it can match to a elements which have the URL on the href but it doesn't have to be exactly. Perhaps you missing some http:// www.. Your code should work. — Henrique Arthur
– Henrique Arthur, Commented Apr 22, 2015 at 19:33

Huangism · Accepted Answer · 2015-04-22 19:39:44Z

1

You can use css and target the unique attribute which I think is the best way to target this

.class a[data-product_id="32570"] { ... }

More documentation and uses here https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

answered Apr 22, 2015 at 19:39

Huangism

16.5k7 gold badges51 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

arcyqwerty · Accepted Answer · 2015-04-22 19:40:01Z

1

Fiddle: http://jsfiddle.net/g68wtwfq/

The CSS as posted .class a[href="URL"]{pointer-events: none;} should work.

However, I would suggest that you do it server side (don't output the href at all) or with JavaScript (remove the href attribute)

If you want to target based on a data attribute

.class a[data-product_id="32570"]{pointer-events: none;}

should do the trick.

One thing to note as I was doing this is that a should be a descendant of .class. If you want to target a link that has class="class" then you should use a.class[attr=value] instead.

answered Apr 22, 2015 at 19:40

arcyqwerty

10.8k4 gold badges53 silver badges91 bronze badges

Comments

William Turrell · Accepted Answer · 2015-04-22 19:43:50Z

1

Yes, you can select elements by data attribute in CSS.

[data-product_id="32570"] {
  /* your styles */
}

This is an attribute selector. It can be prefixed with a parent .class of course.

Your question is a bit ambiguous and I'm unclear if you actually want to target a link to a URL or something on a particular URL, but in WordPress, CSS classes are added to the body tag of every page to help you identify what sort of page it is and style it accordingly.

e.g.

Homepage only:

body.home .foo { ... your CSS properties here ... }

Post with ID of 1:

body.postid-1 .foo { ... }

Page with ID of 2:

body.pageid-1 .foo { ... }

A category called 'example':

body.category-example .foo { ... }

edited Apr 22, 2015 at 19:43

answered Apr 22, 2015 at 19:42

William Turrell

3,3787 gold badges43 silver badges60 bronze badges

1 Comment

RobBenz Over a year ago

sorry, you're right, It was unclear. I wanted to target something ON a particular URL That's my fault for not explaining correctly, Is that possible?

Collectives™ on Stack Overflow

Use css for only one URL

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related