Before anything else, I want to express my apologies if a similar query has been raised previously. Unfortunately, finding such specific cases can be quite challenging.
My objective is to style every "a" element, excluding those enclosed within h1, h2, h3, h4, or h5 header elements.
While I am familiar with the parent selector, I aim to target the child element I am styling with the CSS rule, rather than affecting its parent.
My initial attempt at achieving this looked like the following:
a {
& {
background-color: yellow;
}
&:not(h1, h2, h3, h4, h5, h6) {
@apply text-blue-600 break-words;
& :hover {
@apply text-blue-700;
}
}
}
However, this implementation seems ineffective as it continues to style all "a" tags, including applying the yellow background to the "a" tag itself, which is the current element rather than the parent element as indicated in the documentation.
How can I create the correct selector based on the parent of my "a" element?