Struggling with CSS :nth-child and creating a unique layout with custom elements inside custom elements. The issue arises when trying to display different icons using the :before pseudo-element, but all icons end up being the same. Below is the code snippet:
Attempt 1: Using nth-of-type(number) in CSS
custom-div:nth-of-type(1):before {content:url('1.svg');}
custom-div:nth-of-type(2):before {content:url('2.svg');}
custom-div:nth-of-type(3):before {content:url('3.svg');}
Second attempt: Using child(number) in CSS
custom-div:nth-of-type(1):before {content:url('1.svg');}
custom-div:nth-of-type(2):before {content:url('2.svg');}
custom-div:nth-of-type(3):before {content:url('3.svg');}
Provided HTML structure:
<another-div><custom-div> text 1 </custom-div></another-div>
<another-div><custom-div> text 2 </custom-div></another-div>
<another-div><custom-div> text 3 </custom-div></another-div>
The desired outcome is to have distinct icons for each custom-div, however, regardless of the method applied, the result remains the same - displaying icon '1.svg' across all three custom divs.
UPDATE: It should be noted that custom-div is nested within another-div, both utilizing custom element names.