1

I am trying to apply my custom css style to only one anchor link in the div block. 

<div class="grid">
<div class="zoom">
<a href="" class="card" data-entity-type="layout" data-entity-id="3">
<a href="" class="card" data-entity-type="flex" data-entity-id="3">
<a href="" class="card" data-entity-type="slim" data-entity-id="3">
</div>
</div>

// This applies to all links, 

<style>
div.grid>.zoom>a.card {width:100px !important;display:block}
</style>

But, I would like to apply above css to only data-entity-type="layout". How to implement ? I don't want to use first:child-nth because the data-entity-type="layout" will not always come first.

Prime
  • 3,530
  • 5
  • 28
  • 47
  • `[data-entity-type=layout] { your css }` [spec](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) – Rainbow Apr 05 '20 at 22:59

1 Answers1

2

You can use attribute selectors. It looks like this:

a[data-entity-type="layout"] {
/* css here */
}

Attribute selectors can be generic or specific.

Also, check this post for more on attribute selectors: How do I target elements with an attribute that has any value in CSS?

Sevan Golnazarian
  • 827
  • 9
  • 18