How do I specify == $0 in css?

Question

I have two classes with the same exact name and nothing to differentiate them except for "== $0" on the end of the class.

This is the html

<html>
      <body>
             <div tabindex="0" class="Test" role="button"> == $0

             <div tabindex="0" class="Test" role="button">
      </body>
</html>

I want to select the "== $0" in css.

Where are your closing tags to be positioned in this scenario. — DreamTeK, Apr 26 '19 at 14:45
They are not inside each other they are in different classes with the same exact names — Gaming4me, Apr 26 '19 at 14:45
share a valid and complete HTML so we can better understand. This is actualy not a *complete* HTML code — Temani Afif, Apr 26 '19 at 14:46
You're not closing them, so it's up to your browser to take a guess on the structure. But they are not 'in' classes anyway. Once properly closed, you can use `:first-child` or `:nth-child(2)` to select one of them. You cannot select them by their concrete content. — GolezTrol, Apr 26 '19 at 14:46

Quentin · Accepted Answer · 2019-04-26T14:51:02.933

5

There is no way to express == $0 in CSS. It means "Is currently selected in the DOM Inspector in the Chrome developer tools".

edited Apr 26 '19 at 14:51

answered Apr 26 '19 at 14:45

Quentin

800,325
104
1,079
1,205

Oh ok but how do I specify one or the other if there is no difference between classes – Gaming4me Apr 26 '19 at 14:49
2

It's worth mentioning that this is only for Chrome developer tools. – DreamTeK Apr 26 '19 at 14:49
@Gaming4me — If the two elements are identical, then the only way to distinguish between them in CSS is by using combinators to describe their relationships to other elements. – Quentin Apr 26 '19 at 14:50
@DreamTeK It is the same in Firefox and Safari. Just the UI is slightly different. – str Apr 26 '19 at 14:50
How do I check the classes inside the class to check if it is the right class – Gaming4me Apr 26 '19 at 14:51
@Gaming4me — There is no combinator that can [select an element based on its descendants](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector). – Quentin Apr 26 '19 at 14:52

GolezTrol · Answer 2 · 2019-04-26T14:59:00.070

It's not possible to select the element based on its contents using CSS. There simply is no selector for that.

If you're not looking at the content, you can still differentiate between the two elements, by checking where they are in their parent, or where they are related to other elements.

Children of their parent

For instance, you can use :first-child, or the more generic :nth-child(x) to get a specific child, so .Test:first-child will select only the .Test div that is the first child of its parent. It won't select the other one.

.Test:first-child {
  border: 1px solid blue;
}

.Test:nth-child(2) {
  border: 5px solid red;
}

<div tabindex="0" class="Test" role="button"> == $0</div>
<div tabindex="0" class="Test" role="button"></div>

Looking at their siblings

Alternatively, you can use the ~ combinator to look for siblings:

.Test {
  border: 1px solid blue;
}

/* A .Test that is following another .Test */
.Test ~ .Test {
  border: 5px solid red;
}

<div tabindex="0" class="Test" role="button"> == $0</div>
<div tabindex="0" class="Test" role="button"></div>

How do I specify == $0 in css?

2 Answers2