Alcanzar el primer hijo de un selector pero no su descendencia

18/Dic/2012 165

Problema: a través de CSS, necesitaba entregar estilos al primer hijo de un elemento sin afectar la herencia (nietos y más allá); sólo necesito darle estilo al hijo directo de un selector.

Además: debiera ser genérico, sin restringirse al tipo de selector hijo que exista. Pueden ser <li>, <p>, <span>, etc.

Y por último: que utilizara sólo CSS, nada de JavaScript.

Solución: después de mucho pensar y debatir en Twitter, dí con una una elegante solución que me satisfizo completamente. Para el HTML:

<div>
<span>Hijo</span>
<p>Hijo <b>nieto</b></p>
<pre>Hijo <code>nieto <i>bisnieto</i></code></pre>
</div>

El CSS:

div * {
   color: blue;
   background: gray;
}
   div > :nth-child(n+1)  {
      color: red;
      background: darkgrey;
   }

Ver ejemplo

Comentarios

  1. http://app.gumroad.com/asmr2021/p/best-asmr-online [#]

    Howdy! Someone in my Facebook group shared this site with us so I came
    to take a look. I’m definitely loving the information. I’m book-marking and
    will be tweeting this to my followers! Excellent blog and great style and
    design. asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

  2. http://www.iherb.com/search?kw=questbars [#]

    It is not my first time to pay a visit this
    site, i am visiting this website dailly and get good
    data from here daily. quest bars https://www.iherb.com/search?kw=quest%20bars quest bars

  3. bit.ly [#]

    May I simply just say what a relief to find an individual who actually understands what they are talking about online.

    You actually understand how to bring a problem to light and make it important.
    More people have to look at this and understand this side of the story.
    I was surprised you aren’t more popular because you surely possess the gift.
    ps4 games https://bitly.com/3nkdKIi ps4

  4. http://bit.ly/ [#]

    Thanks for the auspicious writeup. It in truth was once a leisure account it.
    Glance complicated to far delivered agreeable from you! By the way, how could we be in contact?
    cheap flights http://1704milesapart.tumblr.com/ cheap flights

  5. http://bitly.com/ [#]

    Hello, I wish for to subscribe for this website to take hottest updates,
    so where can i do it please assist. scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  6. http://coub.com/ [#]

    If some one wants expert view regarding running a blog
    then i recommend him/her to pay a quick visit this web site, Keep up the
    good job. scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

  7. Mobile recharge [#]

    What a beautiful blog

  8. zithromaxeska [#]

    zithromax tablet can i get zithromax over the counter z pak direction

  9. flagyl side effects in elderly [#]

    I blog often and I really thank you for your content.

    This article has truly peaked my interest. I’m going to book mark your website
    and keep checking for new details about once per week. I opted
    in for your RSS feed too. http://antiibioticsland.com/Flagyl_ER.htm

  10. zyrtec price [#]

    buy cetirizine 10mg – https://allergyd.com

  11. pharmaceptica.com [#]

    cloroquine https://www.pharmaceptica.com/

  12. buy ivermectin for humans uk [#]

    ivermectin buy http://stromectolforte.com/ where to buy ivermectin pills stromectol tablets

  13. bactrim dosage [#]

    is bactrim a strong antibiotic polymyxin b sulfate and Trimethoprim

  14. modafinilwithdrawal [#]

    provigil side effects provigil vs modafinil

  15. bactrim and alcohol [#]

    trimethoprim side effects trimethoprim sulfa

CSSLab