CSS Select "Fraternity Element" with a specific sub-element?
This track. I am inclined to think that this is impossible: - (
Any idea is appreciated.
Below is a snippet that is part of a much larger structure with many .step elements.
I need to match all elements .stepText
that are next to.stepTitleAndImages ul.standard
In other words, match all elements .stepText
that have a parent .step
, that have a child .stepTitleAndImages
that has .stepImages.standard
child
<div class="step">
<div class="stepTitleAndImages">
<h3 class="stepTitle"></h3>
<ul class="stepImages standard"></ul>
<div class="clearer"></div>
</div>
<div class="stepText "></div> **HOW TO SELECT ALL ELEMENTS LIKE THIS ONE?**
<div class="clearer"></div>
</div>
<div class="step">
<div class="stepTitleAndImages">
<h3 class="stepTitle"></h3>
<ul class="stepImages medium"></ul>
<div class="clearer"></div>
</div>
<div class="stepText "></div>
<div class="clearer"></div>
</div>
PS: I cannot change the HTML. You can't use anything other than pure CSS.
source to share
This one cannot do with your HTML structure and with pure CSS. The closest solution to the problem, changing the HTML structure and pure CSS would be to move the class standard
to the parent tag:
<div class="stepTitleAndImages standard">
<h3 class="stepTitle"></h3>
<ul class="stepImages"></ul>
<div class="clearer"></div>
</div>
This will allow you to use the adjacent selector selector ( +
) that matches the second selector if it is the direct next sibling of the first , for example:
.stepTitleAndImages.standard + .stepText {
/* Styles */
}
A more flexible approach would be to use a generic selector selector that matches any affinity preceded by the first selector , not just the next one:
.stepTitleAndImages.standard ~ .stepText {
/* Styles */
}
:has
The pseudo-class is in development by Mozilla , but has not yet hit stable browsers. With it, and with your HTML structure, you can go:
.stepTitleAndImages:has(.standard) + .stepText {
/* Styles */
}
Unfortunately, you cannot currently solve this in any other way with CSS (and with your HTML structure).
source to share
Just use this to select the first case
.step:nth-child(1) .stepText {
... Your CSS here
}
For the second use
.step:nth-child(2) .stepText {
... Your CSS here
}
To select use, use
.step .stepText {
... Your CSS here
}
Then it needs to specify jquery for
Parenting selection is not possible with pure CSS alone, you can achieve this with a single jquery line:
$('ul.standard').parent().siblings(".stepText").css(...your CSS here);
source to share