CODEWITHSUNDEEP
css
Kiwi
Kiwi

Reputation: 43

How to add css to a data-field attribute?

I have the following code and i would like to add a css specific css code (width:200px;) to the data-field="data2" elements:

<th data-field="data1" class="header">
<th data-field="data2" class="header">
<th data-field="data3" class="header">
<th data-field="data4" class="header">

Upvotes: 1

Views: 4260

Answers (5)

Friday Ameh
Friday Ameh

Reputation: 1684

You can try this also

table th[data-field="data2"] {
    width: 200px;
}
<table>
  <th data-field="data1" class="header">1</th>
  <th data-field="data2" class="header">2</th>
  <th data-field="data3" class="header">3</th>
  <th data-field="data4" class="header">4</th>
</table>

Upvotes: 0

Emi-C
Emi-C

Reputation: 4262

Attributes different from class and id can be accessed in css with square brackets syntax, in the [nameOfField="value"] form, so in your example:

[data-field="data2"] {
  width:200px;
}

You can find more information about css atribute selectors here:

https://css-tricks.com/almanac/selectors/a/attribute/

Upvotes: 1

Sandwell
Sandwell

Reputation: 1457

[data-field="data2"] {
    width: 200px;
}
<table>
  <th data-field="data1" class="header">yo</th>
  <th data-field="data2" class="header">yo</th>
  <th data-field="data3" class="header">yo</th>
  <th data-field="data4" class="header">yo</th>
</table>

Upvotes: 4

Rence
Rence

Reputation: 2950

See this for reference: https://www.w3schools.com/cssref/sel_attribute_value.asp

th[data-field="data2"]  { 
   width: 200px;
}

Upvotes: 0

Koby Douek
Koby Douek

Reputation: 16675

You can use the CSS attribute selector to select elements with specified attribute and value:

th[data-field="data2"] {
    width:200px;
}

Upvotes: 0

Related Questions