Menu
Why isn't my first-child selector working in Less?
.leftPanel{
margin:20px;
float:left;
display:inline;
width:620px;
margin-left:10px;
select{
width:300px;
&:first-child{
margin-right: 30px;
}
}
}
238
Use the :not(selector) Selector Not to Select the First Child in CSS. We can use the :not(selector) selector to select every other element that is not the selected element. So, we can use the selector not to select the first child in CSS.
ul:not(:first-child) means literally "any ul element that is not first child of its parent", so it won't match even the 1st ul if it's preceded by another element ( p , heading etc.). On the contrary, ul:not(:first-of-type) means "any ul element except the 1st ul in the container".
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 :first-child: The :first-child selector is used to select those elements which are the first-child elements. For :first-child selector the <! DOCTYPE> must be declared for IE8 and earlier versions. The :first-of-type: The :first-of-type Selector is used to targeting the first child of every element of it's parent.
You are specifying that if the first child element inside a .leftPanel is a <select>, it should have margin-right: 30px;. If you are trying to apply this rule to the first child element inside the <select> (which should always be an <option>), try replacing &:first-child with option:first-child.
190
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
