CSS selector - element with a given child
Is it possible to select an element if it contains a specific child element?
Unfortunately not yet.
The CSS2 and CSS3 selector specifications do not allow for any sort of parent selection.
A Note About Specification Changes
This is a disclaimer about the accuracy of this post from this point onward. Parent selectors in CSS have been discussed for many years. As no consensus has been found, changes keep happening. I will attempt to keep this answer up-to-date, however be aware that there may be inaccuracies due to changes in the specifications.
An older "Selectors Level 4 Working Draft" described a feature which was the ability to specify the "subject" of a selector. This feature has been dropped and will not be available for CSS implementations.
The subject was going to be the element in the selector chain that would have styles applied to it.
Example HTML<p><span>lorem</span> ipsum dolor sit amet</p>
<p>consecteture edipsing elit</p>
This selector would style the span
element
p span {
color: red;
}
This selector would style the p
element
!p span {
color: red;
}
A more recent "Selectors Level 4 Editor’s Draft" includes "The Relational Pseudo-class: :has()
"
:has()
would allow an author to select an element based on its contents. My understanding is it was chosen to provide compatibility with jQuery's custom :has()
pseudo-selector*.
In any event, continuing the example from above, to select the p
element that contains a span
one could use:
p:has(span) {
color: red;
}
* This makes me wonder if jQuery had implemented selector subjects whether subjects would have remained in the specification.
Selecting an element that has a specific child?
No, CSS does not allow you to select elements based on their descendants.
CSS select element with particular child element attribute
I tried your complex selector in CSS, plain JS and using the jQuery lib... Guess who wins!
// Checking if JS handles that selector....
// Let's have the selector in a variable, just to make sure the same is tried in both cases...
let ourSelector = ".wp-block-image figure.alignright:has(img:not([src*='triangle']))"
// JS querySelector
try{
document.querySelector(ourSelector).style.border = "3px solid blue";
}
catch(error){
console.log(error.message);
}
// jQuery! (--WORKS--)
$(ourSelector).css("border", "3px solid blue");
/* This rule applies */
.wp-block-image figure.alignright img:not([src*="triangle"]) {
border: 3px solid red;
}
/* This one not */
.wp-block-image figure.alignright:has(img:not([src*="triangle"])) {
opacity: 0.2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wp-block-image">
<figure class="alignright">
<img width="387" height="500" src="https://via.placeholder.com/300x300.jpg?text=triangle" />
</figure>
<figure class="alignright">
<img width="387" height="500" src="https://via.placeholder.com/300x300?text=square" />
</figure>
</div>
CSS Selectors - Selecting a specific child element
With CSS3's :nth-child()
it's easy to fulfill the "specific" criterion:
#shopping-cart-totals-table > tbody > tr:nth-child(2) > td:nth-child(2) .price
Or, an alternative that works more in favor of browser compatibility (does not use CSS3 selectors, assumes exactly two tr
s and two td
s):
#shopping-cart-totals-table > tbody > tr + tr > td + td .price
css child selectors targeting specific elements in a table
You can use nth-child()
table.v65-productDisplay > tbody > tr:nth-child(4n+1) {
background-color:red;
}
The above will select all your target
Value of n will be 0,1,2,....
that it will select 1st,5th and 9th
tr
Fiddle Demo
For more detail visit here
Select an element without selecting descendants
Use the CSS child combinator >
:
.settings > ul > li > i {
opacity: 0.5;
}
<div class="settings">
<ul>
<li>
<i>Select this element</i>
<ul>
<li>
<i>but not this one</i>
<span></span>
</li>
<li>
<i>or not this one</i>
<span></span>
</li>
</ul>
</li>
</ul>
</div>
CSS select an element with no certain child element
css :not()
not supported to select except "has element" but you can do it with jQuery
$('p').not(":has(img)").css('background-color', 'yellow')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><p>aa</p><p>aa</p><p>img<img src="" /></p><p>aa</p>
Related Topics
How to Write a Caption Under an Image
How to Line Up 3 Divs on The Same Row
CSS Text Ellipsis When Using Variable Width Divs
Why Can't I Make My Div 100% Height If I Use an HTML5 Doctype? How to Get It 100% Height
How to Add a Search Box with Icon to The Navbar in Bootstrap 3
Stacking Divs on Top of Each Other
Div Side by Side Without Float
Css, Nested Divs & Margins VS. Padding
Easy Equal Height Divs Without JavaScript Possible
Overflow:Hidden Not Working as Expected in Google Chrome
How to Have an Image Placeholder in Angularjs
CSS Selectors - Selecting a Specific Child Element
Ionic 2 How to Customize Ion-Range
Less: How to Pass a Mixin as an Argument to Another Mixin
How to Make a Scrollable Element Fill 100% of the Remaining Height of a Parent Element