2

I'm working on a design for a blog. Is there a css selector (or other way that doesn't involve the user adding a class or id to a blockquote tag) that will allow me to differentiate between a blockquote that occurs at the very beginning of a div from a blockquote in the middle of a div after some text blocks?

That is, I'd like blockquotes that are the start of a blog post to have one set of css styles, and blockquotes that occur in the body of a blog post to have other style parameters.

Is this possible?

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
msb
  • 157
  • 1
  • 1
  • 9
  • 1
    @RodneyFolz The problem presented by that question is different to this one, as that one tries to select the first child with a specific class (and not necessarily the actual first child) whereas this wants the very first child. – James Donnelly May 30 '14 at 22:13

2 Answers2

8

Simply:

div > blockquote:first-child {
    ...
}

JSFiddle demo.

This combines the child combinator (>) with the :first-child structural pseudo-class to select the div element's direct child blockquote element only if that element is the first child.

To then style blockquote elements which aren't the first child, you'd simply use the div > blockquote selector, as this has lower specificity than the one above.

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
-1

You are looking for nth-child by the sounds of it.

Read this: http://css-tricks.com/how-nth-child-works/

chris vdp
  • 2,842
  • 2
  • 22
  • 35
vimes1984
  • 1,684
  • 3
  • 26
  • 59