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?
You can use css and target the unique attribute which I think is the best way to target this
More documentation and uses here https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
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 thehref
attribute)If you want to target based on a data attribute
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 hasclass="class"
then you should usea.class[attr=value]
instead.Yes, you can select elements by data attribute in CSS.
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:
Post with ID of 1:
Page with ID of 2:
A category called ‘example’: