Thursday, 2 November 2017

html - :last-child works, :first-child doesn't





I have an aside with two

elements. I'm trying to use CSS to
manipulate the :first-child but it doesn't work. However, when
trying to access the :last-child it
does.



rel="noreferrer">JSFiddle




HTML







200 – Large


class="dimension">





  • Product Dimensions



    29.75w

    x
    17.75h
    x

    28d











CSS




.sku:first-child
            { 
 display:none !important; /*doesn't hide the first
            child*/
}

.sku:last-child { 
 display:none
            !important; /*does hide the first
            child*/
}



Why
won't :first-child select the first div?



Answer




You cannot use
:first-child psuedo class since .sku
is not the first child. A better option is to use either
:first-of-type (for first child) or
:nth-of-type (which can accept a number or an equation) pseudo
classes:



.sku:nth-of-type(1)
            {
 display:
            none;
}


href="http://jsfiddle.net/salman/sobh9zzm/1/" rel="noreferrer">Updated
Demo



-

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

php - file_get_contents shows unexpected output while reading a file

I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print ...