Search code examples
csscss-selectorspseudo-class

How do I use pseudo-classes to select all children except first and last?

In CSS, for the example shown below, how can I make it such that the styles get applied to all paragraphs, except for the first and the last paragraph?

<div class="entry">
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
</div>

I've tried the following to exclude the first paragraph, but that doesn't work:

div.entry p:nth-child(n+1) {
    /* ... */
}

I've also tried nth-of-type() and not(), but couldn't get them to work the way I thought they would.

Edit: I've decided to wrap all the <p>s which I want to apply the style to in a <div>. I've accepted bozdoz answer, because it came the closest to solving the original problem (even though it solved only half of it).

Solution

  • Updated answer:

    Use both :not(:first-child) and :not(:last-child)

    div.entry p:not(:first-child):not(:last-child)

    See updated JSFiddle.