CODEWITHSUNDEEP
javascriptcsswordpress
RobBenz
RobBenz

Reputation: 609

Use css for only one URL

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?

Upvotes: 1

Views: 1908

Answers (3)

William Turrell
William Turrell

Reputation: 3328

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 { ... }

Upvotes: 1

arcyqwerty
arcyqwerty

Reputation: 10685

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.

Upvotes: 1

Huangism
Huangism

Reputation: 16438

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

Upvotes: 1

Related Questions