开发者

CSS Pseudo Classes with Article

开发者 https://www.devze.com 2023-03-31 08:30 出处：网络

I\'m trying to get the first article on the page using CSS. I have tried the 开发者_JAVA百科following:

相关专题：css css-selectors pseudo-class

I'm trying to get the first article on the page using CSS. I have tried the 开发者_JAVA百科following:

article:first {
    background: blue;
}

and

article:first-child {
    background: blue;
}

However neither of these seem to be doing anything.

My HTML markup is as follows (head removed and content ellipsed):

...
<body>
    <div id="wrapper">
        <header>
            <hgroup>
                ...
            </hgroup>
        </header>
        <article>
            ...
        </article>
        <article>
            ...
        </article>
    </div>
</body>

I'm also using the latest version of chrome.

What you're looking for is #wrapper article:first-of-type, but unfortunately it's not widely supported yet.

You could try #wrapper header + article though, for which support is more widespread.

Try modifying your markup:

...
<body>
    <div id="wrapper">
        <header>
            <hgroup>
                ...
            </hgroup>
        </header>
        <section>
            <article>
                ...
            </article>
            <article>
                ...
            </article>
        </section>
    </div>
</body>

:first-child works only with real first children elements (it was header in your case).