.class:first-child CSS not working

Question

Hi there I've got 4 divs each with a class called .section and the first div, I want to use less padding.

If you check out this codepen, I've got a really basic example where it actually works.

However if you look at my current project, I can't actually add the :last-child psuedo element. Please take a look here This code pen has the identical code in the CSS section. However it's not taking effect.

HTML

<div id="sermon-details" class="section">...</div>
<div id="media-content" class="section">...</div>
<div id="social-share" class="section">...</div>
<div id="advanced-settings" class="section">...</div>

CSS

.section:first-child{
  padding-top:15px !important; //Not applying
}

Please put my mind to rest! Thanks!

What class you need to target the last-child in your project? — fbid, Apr 23 '16 at 16:10
Please include the minimal ("[mcve]") code to reproduce your problem in the body of your question. — David Thomas, Apr 23 '16 at 16:16
But it works in the first codepen? Therefore can I use a div as the selector? — Jonah M, Apr 23 '16 at 16:35

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

There's a syntax error in your project's codepen.

Wrong

.section :first-child{
  padding-top:15px !important;
}

Correct (:first-child without space before)

.section:first-child{
  padding-top:15px !important;
}

You will notice the <h1> tag will move according to the padding-top being applied.

-

Alternative solution

You can add a new class to that specific section you need to apply the padding-top rule.

HTML

<!-- first of .section class --> 
<div class="section new-class"> 
  <!-- ... -->
</div>

CSS

.section.new-class { padding-top: 15px }

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 23 '16 at 16:16

fbid

1,570
2
18
29

Yes, that's not working or changing the `
`
– Jonah M Apr 23 '16 at 16:33
@JonahM in case you need to target a specific class, I think the most simple solution to avoid problems is assigning a new class to that specific section and apply the rules to the new class. – fbid Apr 23 '16 at 16:37

score 0 · Answer 2 · answered Apr 23 '16 at 17:20

it works in first code pen cause it have a well written CSS

in second codepen - unworkable cause... awful html, awful css (imho - too many random classes and id's). U must clean your code before test for 1st element, see that css

.section{color: red;}/*to mark red all section classes*/

.section:first-child{
  padding-top:0px !important;
color: blue;/*to mark first child, what not exist*/
}


#sermon-details/*don't use other, unnecessary rules*/

to see what you have in your html!

p.s. RTFM

.class:first-child CSS not working

2 Answers2

Alternative solution

`