If you need to access this element with CSS, you can simply use the parent class.

.3 .hair{}

If you are trying to get this object in JS, you have two choices. The first one is to use vanilla js.

//+ES6
document.querySelector(".3 .hair").innerText;
//Red

//---------

//vanilla js
document.getElementsByClassName("3")[0].getElementsByClassName("hair")[0].innerText;
//Red

The second choice is jQuery. It's like using the query selector.

$(".3 .hair").text();
//Red

You can write the parents class before the child

const el = document.querySelector(".3 .hair")

You can use the parent class as they are unique:

.three > .hair

Please Note:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit

Demo:

let thirdEl = document.querySelector('.three > .hair');
console.log(thirdEl.textContent)

<div class="one">
  Object 1
  <div class="hair">Black</div>
</div>
<div class="two">
  Object 2
  <div class="hair">Brown</div>
</div>
<div class="three">
  Object 3
  <div class="hair">Red</div>
</div>