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


Tags: css,css-selectors,pseudo-class

Problem :

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.


    CSS Howto..

    How to make these jquery pop ups fall back to css when javascript disabled

    How do I add a div under a right floated div?

    How can I move this box in this HTML/CSS file?

    How to send CSS to the client using HTTP response headers?

    How do I apply properties to a previous sibling on hover?

    How do I change the css gradient values when my progress bar value changes?

    How to optimize an image sequence in Chrome?

    How to change the background colour of a QWidget inside QStackedWidget using css?

    How to set a background-color to element which has the same id with anchor of url?

    how to download google fonts in version bold

    How to exclude some text from browser zoom

    How to toggle div and up-down arrow heads using css only

    CSS: how to enforce word wrap on an odd situation?

    how to select image using css

    How to wrap text in css

    how to set background image in css at MVC4

    How can i spin an image -360 degrees and +360 degrees using the -webkit and jQuery?

    How to change transparency of background image using javascript?

    How to get border radius and gradient background working together in IE 9

    How to place differently sized images in 2 columns with figcaption aligned

    how to install bootstrap-select on server

    Footer Showing White Bar on only one page of website

    Slideshow won't accept fixed height

    how to get image to show up to the left of panel (both in same row)

    jQuery: how to avoid transparent effect on a mask div

    How to align two text boxes on same line with CSS

    How can I set a default pseudo styles in my css?

    How to link to a “tab” on my website

    How do I apply CSS Transition to my responsive menu?

    How to hide text behind image