How to select element based on 2 inline styles in CSS?

Question

Suppose, I have a div with following css proprties among with other similar divs.

<div
  style="
    display: block;
    width: 200px;
    border-right: 1px solid rgb(237, 237, 236);
    white-space: nowrap;
    min-height: 32px;
    cursor: default;
    padding: 5px 8px 6px;
    font-size: 14px;
    overflow: hidden;
    height: 32px;
  "
>
  howdie
</div>

I want to select div by 2 inline properties display: block; and white-space: nowrap;. I know I can select the div by one property like display: block;:

div[style*="display: block;"]{
// div selected
}

But can't select the div by 2 properties:

div[style*="display: block; white-space: nowrap;"]{
// nothing get selected
}

How to select div (without js) by 2 inline properties which may not be sequential like display: block; and white-space: nowrap;?

score 2 · Accepted Answer · answered Jan 26 '21 at 12:23

Specify style*=[""] for each style like this:

div[style*="display: block;"][style*="white-space: nowrap;"]{
  ...
}

div[style*="display: block;"][style*="white-space: nowrap;"]{
  color: red;
}

div[style*="display: block;"]{
  color: green;
}

<div
  style="
    display: block;
    width: 200px;
    border-right: 1px solid rgb(237, 237, 236);
    white-space: nowrap;
    min-height: 32px;
    cursor: default;
    padding: 5px 8px 6px;
    font-size: 14px;
    overflow: hidden;
    height: 32px;
  "
>
  howdie
</div>

<div
  style="
    display: block;
    width: 200px;
    border-right: 1px solid rgb(237, 237, 236);
    min-height: 32px;
    cursor: default;
    padding: 5px 8px 6px;
    font-size: 14px;
    overflow: hidden;
    height: 32px;
  "
>
  howdie
</div>

score 1 · Answer 2 · answered Jan 26 '21 at 12:20

div[style*="display: block"][style*="white-space: nowrap"]{
  color:red;
}

<div
  style="
    display: block;
    width: 200px;
    border-right: 1px solid rgb(237, 237, 236);
    white-space: nowrap;
    min-height: 32px;
    cursor: default;
    padding: 5px 8px 6px;
    font-size: 14px;
    overflow: hidden;
    height: 32px;
  "
>
  howdie
</div>

How to select element based on 2 inline styles in CSS?

2 Answers2