I'm building a website and I need to access an element with a specific class name from another element but I have used this class name within other groups.
<div class="1">
Object 1
<div class="hair">Black</div>
</div>
<div class="2">
Object 2
<div class="hair">Brown</div>
</div>
<div class="3">
Object 3
<div class="hair">Red</div>
</div>
How would I access the hair for solely Object 3?
Could someone please provide a solution? Thank you so much!
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>