Select only children of a div but not grandchildren using CSS [duplicate] - html

This question already has answers here:
Is there a CSS selector for the first direct child only?
(8 answers)
CSS selector for targeting only immediate children and not other identical descendants
(2 answers)
Closed 4 years ago.
I am trying to select only children of a div using CSS.
HTML:
<div class="wrapper">
<div>Child
<div>GrandChild</div>
</div>
<div>Child</div>
<div>Child</div>
</div>
CSS:
.wrapper div:first-child {
display: inline-block;
}
Fiddle: https://jsfiddle.net/781vcf4L/3/
The above CSS applies the CSS property only to a grandchild. I removed the :first-child part and it applies the property to all divs (children and grandchild).
This is what I am trying to achieve:
<div class="wrapper">
<div style="display: inline-block">Child
<div>GrandChild</div>
</div>
<div style="display: inline-block">Child</div>
<div style="display: inline-block">Child</div>
</div>
How can I apply the CSS property to children only?

A space between two selectors is the descendant combinator which, unsurprisingly, selects all descendants including children and grandchildren.
Replace it with the child combinator (>) which selects only children.

Related

How to make changes to the sibling element if child of an element is focused? [duplicate]

This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 1 year ago.
I want to change colour of css.seperator when css.searchBarInput is in focus, how can I do this?
Here's my HTML for reference:
<div className={css.searchBarBase}>
<div className={css.searchBarFirstDiv}>
<label className={css.searchBarDivContent} htmlFor="location-search-input">
<div className={css.searchBarHeadingFont}>Location</div>
<input
id="location-search-input"
className={css.searchBarInput}
/>
</label>
</div>
<div className={css.seperator}/>
</div>
Here's my attempt at it:
.searchBarBase > div:focus-within + div {
opacity: 0;
}
If there is only one focusable element inside searchBarBase then you can look at focus-within.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)
selector to use for you would be .searchBarFirstDiv:focus-within ~.seperator {/* style to apply here */}

Select most top level element [duplicate]

This question already has answers here:
CSS selector for first element with class
(23 answers)
How to apply css to top level element only
(2 answers)
Is there a CSS parent selector?
(33 answers)
Closed 3 years ago.
I have a html code :
<div class="body">
<p></p>
<div class="select">
<p class="p1"></p>
<div class="select"></div>
<p class="p2"></p>
</div>
</div>
I want to select div element with class select. There are two element of this type which I want the parent one. How can I do that? Pay attention that the above code is just an example and the code can become complex arbitrarily.
Two div elements with same class may not be direct child and parent of each other and I want to do this by css-selectors if possible.
Style the .select and then overwrite those styles in .select .select:
.select {
/* top level select element */
color: red;
}
.select .select {
/* reset styles in nested select element */
color: initial;
}
<div class="body">
<p>Text</p>
<div class="select">
<p class="p1">Top Level Select</p>
<div class="select">Nested Select</div>
<p class="p2">Top Level Select</p>
</div>
<div>
<p class="p1">Text</p>
<div class="select">Top Level Select</div>
<p class="p2">Text</p>
</div>
</div>

Conditionally set style if sibling element exists in PURE CSS [duplicate]

This question already has answers here:
CSS: Select element only if a later sibling exists
(9 answers)
Closed 5 years ago.
I have the following structure, where second element may or may not appear.
<div class="wrapper">
<div class="firstElement"></div>
<div class="secondElement"></div>
</div>
I want to conditionally set styles on .firstElement ONLY if .secondElement exists.
Is there a way to do this with PURE CSS? With either sibling selectors/ parent selectors?
Thanks!
In general, no. CSS reads forwards/down the DOM - it won't read backwards/up. But with this markup, you could use :not(:last-child)
.firstElement:not(:last-child) {
color: red
}
<div class="wrapper">
<div class="firstElement">target this</div>
<div class="secondElement"></div>
</div>
<div class="wrapper">
<div class="firstElement">not this</div>
</div>

CSS selector getting parent when you know the child [duplicate]

This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 9 years ago.
I have the following HTML
<div id"mainDiv">
<ul id="cat1">
</ul>
</div>
<div id"mainDiv">
<ul id="cat2">
</ul>
</div>
I would like to select the "mainDiv" which has a child ul "cat1", in my CSS as I want to apply some styling on that div. But not the all maindiv's
Any ideas?
Your markup is invalid:
<div id"mainDiv">
should be
<div id="mainDiv">
Since duplicate ID's are invalid in HTML, your question is really invalid in this context.
You should either use a class OR rethink your structure.
Example for the first div:
<div class="mainDiv firstdiv">
and subsequent divs:
<div class="mainDiv">
CSS:
.firstdif{}
put your CSS in that.
No CSS selector for this currently, so you're going to have to resort to some JavaScript/jQuery:
$('#cat2').parent().css(/* add it here */);

Difference between these selectors [duplicate]

This question already has answers here:
Why are spaces used to separate things in css
(3 answers)
Closed 9 years ago.
Is there any difference between these selectors?
div.demo and div .demo
div#demo and div #demo
Does it select the same element?
div.demo{some code}
div .demo{some code}
Yes, there is.
div.demo will match a div with class demo
<div class="demo">
div .demo will anything with class demo inside any div:
<div>
<span class="demo">
</div>
Same with the id selector #.
div.demo
will select div with class demo whereas
div .demo
will select any descendant of a div with class demo. Same concept for the second case.