0

I want to select all p's in the .content-area except for the p's under <footer>. How do I do this in CSS? By the way, <footer> is inside .content-area

In any case, this is the CSS rule I want to put on all p's under .content-area

.class p {padding-top: 20px; padding-bottom: 20px;}

EDIT: As per the comment below, the source code looks something like this.

<div class="content-area">
    <img />
    <p></p>
    <p></p>
    <footer> 
        <p></p>
        <ul></ul>
    </footer>
</div>

Can anyone help me?

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
gelolopez
  • 174
  • 1
  • 4
  • 12

3 Answers3

4

You If the paragraphs are directly within the .class element, you should use children selector as .class > p to select the p elements.

.class > p  {
  background-color: gold;
}

Demo.

In order to select the nested <p> elements excluding those are nested within footer, you can use :not() pseudo-class as follows:

.class > p,
.class :not(footer) p {
  background-color: gold;
}

Updated Demo.

However, you can also override the applied style to the paragraphs inside the footer.

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • Be careful when using `:not()` with descendant selectors - in particular if you have more than two levels of nesting, it may match the wrong elements. See my answer [here](http://stackoverflow.com/questions/20869061/is-the-css-not-selector-supposed-to-work-with-distant-descendants) – BoltClock Mar 04 '14 at 03:47
1

You just need to reset the styles of your paragraphs inside the <footer>:

.class p {padding-top: 20px; padding-bottom: 20px;}

.class footer p {padding-top: 0; padding-bottom: 0;}

Based on your edit, you can use direct child > selector:

.content-area > p {
   padding-top: 20px; padding-bottom: 20px;
}
Felix
  • 37,892
  • 8
  • 43
  • 55
0

Use the immediate children selector

.content-area > p {
   padding-top: 20px; padding-bottom: 20px;
}

this will apply the style only to the direct children of .content-area

Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177