As I work on styling existing documents with CSS, I find myself using a variety of adjacent sibling selectors (such as item1 + item2) to add spacing between elements. However, some of the documents contain <style> tags at different points in the page, which causes interference with my CSS selectors. This becomes problematic when wanting to apply certain styles to specific elements, like adding a margin-top to every element except the first one using * + *. The presence of style tags confuses the selectors and affects the overall styling.
I have considered using something like :not(style) + item to address this issue, but it falls short if there are additional style tags interspersed throughout the document. Is there a foolproof method to handle this purely with CSS? While I am unable to directly modify the HTML files, I may be able to preprocess them with JavaScript before rendering if necessary.
Edit: Additionally, how can I target the very first element on the page that is not a <style> tag? In other words, how do I select the initial non-style tag element without inadvertently selecting a <style> tag?
For instance, consider a scenario where I have a CSS file and a corresponding HTML snippet:
div {
background-color: yellow;
}
*+div {
background-color: lime;
margin-top: 1em;
}<style>
div {
font-weight: bold;
}
</style>
<div>Yellow</div>
<div>Green</div>
<div>Green</div>
<div>Green</div>
<div>Green</div>