1

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">

5 Answers 5

5

[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>

Sign up to request clarification or add additional context in comments.

1 Comment

you are missing double quote after data2
1

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/

Comments

0

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

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

Comments

0

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

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

Comments

0

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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.