:First-Child Not Working as Expected

:first-child not working as expected

The h1:first-child selector means

Select the first child of its parent

if and only if it's an h1 element.

The :first-child of the container here is the ul, and as such cannot satisfy h1:first-child.

There is CSS3's :first-of-type for your case:

.detail_container h1:first-of-type
{
    color: blue;
}

But with browser compatibility woes and whatnot, you're better off giving the first h1 a class, then targeting that class:

.detail_container h1.first
{
    color: blue;
}

CSS first-child not working

The :first-child pseudo class, like all other :nth-child()-related pseudo-classes counts all siblings (i.e., elements having the same parent). Classes are ignored, as they have nothing to do with the DOM structure.

So :first-child is always the first sibling.

This...

ul li.has-item:first-child {
  font-size:8px
}

doesn't work because .has-item doesn't represent the :first-child of anything. The first child will always be <li>one</li>.

Related: Why is nth-child selector not working?

CSS selector first-child does not work

Your html markup is the following:

<section class="new photos">
    <h4 class="title">...</h4>
    <div class="block-photo">...</div>
    <div class="block-photo">...</div>
    ...
</section>

first-child / nth-child

Matches an element if it is the first child.

.block_photo:first-child {
    /* styles here apply to the .block_photo IF it is the first child */
}

In your case, because the first child is <h4>, the selector .block_photo:first-child matches no element.

first-of-type / nth-of-type

Matches the first element of a certain type

.block_photo:first-of-type {
    /* styles here apply for the first .block_photo element */

    /* that is what you need */
}

References:

W3C specification on first-child

W3C specification on first-of-type

:last-child style working, :first-child style not working! Why?

p:first-child does not work because the h1 element is the first child of its corresponding parent element; the p elements are the second, third and fourth child elements. Use p:first-of-type instead to only select the first element of the type p.

h2:first-child and h2:first-type does not work as I expected

:first-of-type is working correctly in your code.

h2:first-of-type would be the first h2 child of each parent element, not the first h2 throughout the whole document.

h2 {
  color: blue;
}

h2:first-of-type {
  color: red;
}

<body>
    <h2>This is the first h2 type in body</h2>
    <h2>This is the second h2 type in body</h2>
    <div>
      <h2>This is the first h2 type in div</h2>
      <h2>This is the second h2 type in div</h2>
    </div>
    <h2>This is the third h2 type in body</h2>
  </body>

css first child not working when selection is inside another class

.product-info-top .price-box *:first-child .price {  color: red;}

<div class="product-info-top">                    <div class="price-box">    <span class="regular-price hide-in-list">        <span class="price">$10</span>                                        </span>    <a href="#" class="minimal-price-link">        <span class="price">$8.50</span>    </a></div><div class="product-name-wrap">    <h2 class="product-name">        <a href="#" title="Sleepers V2 Insomniac">Sleepers Insomniac</a>    </h2>    <p class="parent-cat-name">Playing Cards</p>                    </div>                                      

<div class="product-info-top">                     <div class="price-box">                                 <p class="old-price">        <span class="price">$7.49</span>    </p>    <p class="special-price">        <span class="price">$5</span>    </p></div><div class="product-name-wrap">    <h2 class="product-name">        <a href="#" title="LTD Purple">LTD Purple</a>    </h2>    <p class="parent-cat-name">Playing Cards</p>                    </div>

First-child not working inside :hover

Instead of first-child you can use first-of-type selector:

 ul li:hover > ul:first-of-type

Note that > selector ensures that the nearest descendent ul is only targetted - see demo below and updated codepen:

ul {  list-style: none;  margin: 0;  padding: 0;}ul a {  color: #333333;  text-decoration: none !important;  display: block;  font-size: 16px;  padding: 10px 15px;}ul li {  position: relative;  display: inline-block;}ul li:hover {  background: #f7f7f7;}ul li:hover > ul:first-of-type {  background: green;}ul li ul {  position: absolute;  min-width: 150px;  top: 100%;  left: 0;  background: #f7f7f7;  padding: 10px 0;}ul li ul li {  display: block;}ul li ul li ul {  top: -10px;  left: 100%;}

<ul>  <li>    <a href="{{ server.URI }}products/">{{ langs.Products }}Menu</a>    <ul>      <li>        <a href="">menu</a>        <ul>          <li>            <a href="">menu</a>          </li>          <li>            <a href="">menu</a>          </li>          <li>            <a href="">menu</a>          </li>          <li>            <a href="">menu</a>            <ul>              <li>                <a href="">menu</a>              </li>              <li>                <a href="">menu</a>              </li>              <li>                <a href="">menu</a>              </li>              <li>                <a href="">menu</a>              </li>            </ul>          </li>        </ul>      </li>    </ul>  </li>  <li>    <a href="{{ server.URI }}services/">{{ langs.Services }}</a>  </li>  <li>    <a href="{{ server.URI }}news/">{{ langs.News }}</a>  </li>  <li>    <a href="{{ server.URI }}about/">{{ langs.About }}</a>  </li>  <li>    <a href="{{ server.URI }}contact/">{{ langs.Contact }}</a>  </li></ul>

have no idea why :first-child is not working as expected

You have a typo in your CSS

.inner-padding h1:first-child, .inner-padding h2:first-child, .inner-padding h3:first-child, .inner-padding h4:first-child, .inner-padding h5:first-child, .inner-padding h6:first-child**,** {
    margin-top:0;
}

Remove the last comma in the selector (otherwise it's not valid and not parsed). Fiddle: http://jsfiddle.net/yGgXP/

Also, next time, please make a jsFiddle for your question!

:first-child and :last-child selector not working in form

The definition of :first-child selector as per MDN is below:

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

However, in your case, the .col-sm-1 divs are not the first or last element of their parent. They are 2nd and 4th child of .form-group respectively. This is why the styles are not being applied to .col-sm-1 in your code.

You can use nth-child property to target the .col-sm-1 elements in CSS as below:

#addUserTaskForm .form-group div.col-sm-1{
    width:45%;
}
#addUserTaskForm .form-group div.col-sm-1:nth-child(2){
    margin-bottom:5px;
}
#addUserTaskForm .form-group div.col-sm-1:nth-child(4){
    margin-left:35%;
}

JSFiddle: https://jsfiddle.net/hchw6Ljm/2/

:First-Child Not Working as Expected