Question 45916 in CSS Question posted in
Some basic documentation can be found here.

CSS Select element with 4 classes while 3 of them has the same start

I have an element, that has class MuiTable-root jss51 jss52 jss53.

Another element has class MuiTable-root jss51.

Numbers after jss can be different, but the number after the first jss in the first element and the only jss in the second element are the same. (eg. MuiTable-root jss23 jss24 jss25 for the first element and MuiTable-root jss23 for the second)

How do I select just the first element using css?

Edit:

Html I work with:

<div>
   <table class="MuiTable-root jss51 jss52 jss53">
      <colgroup>...</colgroup>
      <thead class="MuiTableHead-root">...</thead>
   </table>
   <table class="MuiTable-root jss51">
      <colgroup>...</colgroup>
      <tbody class="MuiTableBody-root">...</thead>
   </table>
</div>

I only need to change the instance of first table. I cannnot access <div> above the tables. I need to work purely using tables’ classes. Again, number after jss are not always 51, 52, 53

Tags:

2

Answers


  1. 0

    use this selector:

    .MuiTable-root:nth-of-type(1) {
  background-color: yellow;
}

    An explanation of this selector, here

    Browser support – check here

    Login or Signup to reply.
  2. 0

    If it is given that:

    • at least one jss in the first <table> comes right after a class name that ends with a number between 0 and 9 (e.g. jss51 jss52)
    • the jss in the second <table> does not come right after a class name that ends with a number between 0 and 9

    You can check for a jss occurence, that comes right after a number Y between 0 and 9 with

    [class*="Y jss"]

    see w3 documentation for reference:

    [att*=val]
    Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.

    For example:

    [class*="0 jss"],
[class*="1 jss"],
[class*="2 jss"],
[class*="3 jss"],
[class*="4 jss"],
[class*="5 jss"],
[class*="6 jss"],
[class*="7 jss"],
[class*="8 jss"],
[class*="9 jss"]
{
color: red;
}
    <table class="MuiTable-root jss51 jss52 jss53">
  <colgroup></colgroup>
  <thead class="MuiTableHead-root">
    <td>should be red</td>
  </thead>
</table>
  <table class="MuiTable-root jss51">
  <colgroup></colgroup>
  <tbody class="MuiTableBody-root">
    <td>should not be red</td>
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search