CSS Select First Child Only If Two Children

:first-child selector selects more than one children

I think you need an additional child selector element like this:

ul.myUl > li:first-child {
    color: red;
}

Example Fiddle

Your selector selects any <li> below ul.myUL, that is a first child. As this references only to the immediate parent and not any other ancestor, all those other <li> match as well.

EDIT

After your comment, I assume, that you will need a somehow complexer selector like this:

ul.myUl > li:first-child,
ul.myUl > ul:first-child > li:first-child {
        color: red;
}

Targeting first 2 children or last 2 children

For the first two children you can use:

ul li:nth-child(-n + 2) {
    color: orange;
}

http://jsfiddle.net/nYnSz/1/

For the last two:

ul li:nth-last-child(-n + 2) {
    color: orange;
}

http://jsfiddle.net/nYnSz/

CSS First Child when 7 or more children

You can select the first element when there are 7 or more elements by using the below selector:

div:first-child:nth-last-child(n+7) {
  color: red;
}

Explanation:

• nth-last-child(n+7) - Will select all but the last seven child elements. When there are less than seven children, this will match none.
• :first-child:nth-last-child(n+7) - Will select only the element which is also the first child among the elements which match the other part (which is, select only first child when there are seven or more children)

.container > div:first-child:nth-last-child(n+7) {  color: red;}

<h3>Has seven children</h3><div class='container'>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div></div>
<h3>Has six children</h3><div class='container'>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div></div>
<h3>Has nine children</h3><div class='container'>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div></div>

How to select only first two children of a parent in a mixin with nth-child?, not every first and second

You need to add the child combinator > to the selectors in your mixin to ensure you actually select just the children of #section and not any further descendants:

@mixin two-col($width-left, $width-right) {
    @include clearfix;
    > div:nth-child(1) {
        float: left;
        width: $width-left;
    }
    > div:nth-child(2) {
        float: right;
        width: $width-right;
    }
}

not:first-child selector

One of the versions you posted actually works for all modern browsers (where CSS selectors level 3 are supported):

div ul:not(:first-child) {
    background-color: #900;
}

If you need to support legacy browsers, or if you are hindered by the :not selector's limitation (it only accepts a simple selector as an argument) then you can use another technique:

Define a rule that has greater scope than what you intend and then "revoke" it conditionally, limiting its scope to what you do intend:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

When limiting the scope use the default value for each CSS attribute that you are setting.

css for the first direct child only

Use the first child selector:

.nav-collapse .nav:first-child {}

You can combine it with the direct child selector if you have more nested .nav elements.

.nav-collapse > .nav:first-child {}

Is there a CSS selector for the first direct child only?

What you posted literally means "Find any divs that are inside of section divs and are the first child of their parent." The sub contains one tag that matches that description.

It is unclear to me whether you want both children of the main div or not. If so, use this:

div.section > div

If you only want the header, use this:

div.section > div:first-child

Using the > changes the description to: "Find any divs that are the direct descendents of section divs" which is what you want.

Please note that all major browsers support this method, except IE6. If IE6 support is mission-critical, you will have to add classes to the child divs and use that, instead. Otherwise, it's not worth caring about.

CSS select all child elements except first two and last two

You don't even need :not(). :nth-child(n+3):nth-last-child(n+3) works fine.

Check it out here.

---

Related Topics