Use css for only one URL

5 Views

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?

Read More

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?

Post Views: 5

Related posts

Leave a Reply

3 comments

  2. 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.

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