How can I select all the elements whose attribute value is odd

Question

How can I select all the elements whose attribute value is odd. eg:

<tr class="MuiTableRow-root" index="0" level="0" path="0" style="transition: all 300ms ease 0s; pointer-events: inherit;">
<tr class="MuiTableRow-root" index="1" level="0" path="0" style="transition: all 300ms ease 0s; pointer-events: inherit;">
<tr class="MuiTableRow-root" index="2" level="0" path="0" style="transition: all 300ms ease 0s; pointer-events: inherit;">

I want to apply styles on tr whose index attribute value is odd using css.

Does this answer your question? [Alternate table row color using CSS?](https://stackoverflow.com/questions/3084261/alternate-table-row-color-using-css) — Gerard, May 21 '20 at 11:41

score 0 · Answer 1 · answered May 21 '20 at 11:56

You can try like below:

[index$='1'],
[index$='3'],
[index$='5'],
[index$='7'],
[index$='9'] {
  color: red;
}

.MuiTableRow-root {
  font-size:25px;
}
.MuiTableRow-root::before {
  content:attr(index);
}

<div class="MuiTableRow-root" index="0" level="0" path="0"></div>
<div class="MuiTableRow-root" index="1" level="0" path="0"></div>
<div class="MuiTableRow-root" index="2" level="0" path="0"></div>
<div class="MuiTableRow-root" index="19" level="0" path="0"></div>
<div class="MuiTableRow-root" index="33" level="0" path="0"></div>
<div class="MuiTableRow-root" index="42" level="0" path="0"></div>
<div class="MuiTableRow-root" index="40" level="0" path="0"></div>

@krissh here you go: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors also don't forget to accept the answer if it solves your issue — Temani Afif, May 29 '20 at 12:18

score -1 · Answer 2 · answered May 21 '20 at 11:43

-1

Try :nth-child(odd) on the end of your selector.

Example:

tr:nth-child(odd) {
    color: red;
}

answered May 21 '20 at 11:43

Mr. Simmons

448
3
14

How can I select all the elements whose attribute value is odd

2 Answers2