Menu
I have complex blocks of DIVs netted to one another and I cannot edit them because this html code is provided from the system. Only thing I could do is from CSS.
I want to select only "Child 1". My CSS does select "Child 1", but because of some related class netted to one another, it selects "Grand child 1" and "Great grandChild 1", as well, unfortunately!
Please give me a hand on how to select only "Child 1".
Thanks!
.container > .child:first-child {
border: 1px solid red;
}<div class="container">
Parent
<div class="child">
Child 1
</div>
<div class="child">
Child 2
<div class="container">
Child of Child 2
<div class="child">
Grand Child 1
</div>
<div class="child">
Grand Child 2
<div class="container">
Parent
<div class="child">
Great grandChild 1
</div>
<div class="child">
Great grandChild 2
</div>
</div>
</div>
</div>
</div>
</div>
353
The :first-child selector is used to select the specified selector, only if it is the first child of its parent.
The :first-child selector allows you to target the first element immediately inside another element. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
The most likely answer is #containingElement > h1:first-child .
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.
To select the first child of a class, you can use the class selector in combination with the :first-child selector. The selector allows you to select only the first child of its parent element. selector. selector to select the first child of a class.
To get the first child element of a specified element, you use the firstChild property of the element: If the parentElement does not have any child element, the firstChild returns null. The firstChild property returns a child node which can be any node type such as an element node, a text node, or a comment node.
The following example selects all child elements of the element with the Id main: let menu = document .getElementById ( 'menu' ); let children = menu.children; console .log (children); The firstChild and lastChild return the first and last child of a node, which can be any node type including text node, comment node, and element node.
If you want to select only the last child element with the element node type, you use the lastElementChild property: The following code returns the list item which is the last child element of the menu:
This will only select .container that not child of the .child.
:not(.child) > .container > .child:first-child {
border: 1px solid red;
}<div class="container">
Parent
<div class="child">
Child 1
</div>
<div class="child">
Child 2
<div class="container">
Child of Child 2
<div class="child">
Grand Child 1
</div>
<div class="child">
Grand Child 2
<div class="container">
Parent
<div class="child">
Great grandChild 1
</div>
<div class="child">
Great grandChild 2
</div>
</div>
</div>
</div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
