Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS select an element with no certain child element

Tags:

html

css

For example we have this

<p></p>
<p></p>
<p><img src="" /></p>
<p></p>

How can we select all p elements and apply css styles into it except those with img child element?

like image 523
Nico Real Avatar asked Jul 31 '17 03:07

Nico Real


People also ask

Which selector select an element that has no children?

The :empty CSS pseudo-class represents any element that has no children.

How do you select an element that does not have a specific class?

To select element that does not have specific class with JavaScript, we can use the document. querySelector method with the :not pseudoclass. const li = document. querySelector("li:not(.

How do I select a specific child in CSS?

The CSS child selector has two selectors separated by a > symbol. The first selector indicates the parent element. The second selector indicates the child element CSS will style.

How do I select a specific Nth child in CSS?

Definition and UsageThe :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.


1 Answers

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>
like image 124
ewwink Avatar answered Sep 25 '22 06:09

ewwink