CODEWITHSUNDEEP
csscss-selectors
Dale M. Rollinson
Dale M. Rollinson

Reputation: 31

Styling paragraphs NOT preceded by a heading level element

I wonder whether it is possible to style a paragraph not preceded by a heading?

I guess the rule would look something like this:

  p (direction for "without/not preceded by") h1, h2, h3, h4, h5, h6 {

Or... does the rule have to be written for the opposite:

  h1, h2, h3, h4, h5, h6 + p {

...therefore paragraphs could have the style desired for a paragraph not preceded by a heading, by default.

Kind Regards, Dale

Upvotes: 3

Views: 3373

Answers (3)

Dale M. Rollinson
Dale M. Rollinson

Reputation: 11

Thanks for the suggestions guys.

I felt that there was some selector that would do the job, but it looks very dodgy to use that one.

I will go with:

 p {

and then, lower in the cascade:

 h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {

Annoying that the

 p {

is the exception rather than the rule : D

Upvotes: 1

Jason Gennaro
Jason Gennaro

Reputation: 34855

Sure. Style all your paragraphs the way you would like them to appear without headings preceding them:

p {//styles here}

Then, farther down in the stylesheet, add the styles for paragraphs preceded by headers:

h1 + p, h2 + p, etc {//styles here}

The regular paragraphs will be styled as you want them. The ones with preceding headers will get the later styles.

EDIT: I should add that the later styles will inherit from the earlier styles, so you will need to overwrite certain rules... for instance, if you have background-color: red on all your p tags but you do not want a red background on the p that are preceded by an h, then you need to set that background-color to none or another color, etc.

Upvotes: 1

Josh Lee
Josh Lee

Reputation: 177550

I'm pretty sure you have to write the opposite, as you described. Two important points, however:

  1. The first solution that comes to my mind is using :not, or the negation pseudo-class. However, it only takes a simple selector, so 

    :not(h1, h2, h3, h4, h5, h6) + p

    would be illegal.

  2. As you have written your second selector, the + p term only applies to the h6; paste it into the SelectORacle to see. The correct selector would be

    h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p

Upvotes: 5

Related Questions