CSS change to only one paragraph - no extra classes

Question

I have just been given some bug fixes to do on some code I haven't seen or developed before.

On the page there are four paragraphs (<p>) but I need to increase the font-size of only the first one and not the others.

It is not possible to add an extra class for the paragraph that needs changing but is there any way to do it another way using css?

Here's the css that would change all of them:

.<company-name>-information-page .<company-name>-content p {
    font-size: 16px;
}

Thanks.

Your question would be more complete with an extract of the HTML as answers can vary based on the structure. Feel free to mask any sensitive text, but you should be able to preserve the HTML structure while doing so. — BoltClock, Jan 16 '15 at 09:34

score 3 · Accepted Answer · answered Jan 16 '15 at 09:34

3

If you just want to change the first paragraph, you can use :first-child.

p:first-child {
  color: blue;
}

<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>

If you want to manipulate the second or any odd paragraph, you can use the nth-child. There are many possibilities, use some checker to develop the right code: http://css-tricks.com/examples/nth-child-tester/

p {
  color: red;  
}
p:nth-child(2) {
  color: blue;
}

<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>

answered Jan 16 '15 at 09:34

roNn23

1,532
1
15
32

It works only if the paragraph is the very first child of its parent, e.g. is not preceded by a heading, an image, or any other element inside the same parent. Therefore `:first-of-type` would be better than `first-child` (even though browser support might be slightly limited). Otherwise the code will break when someone adds even a modest `
` before the paragraph. – Jukka K. Korpela Jan 16 '15 at 09:52
@JukkaK.Korpela: `first-of-type` (CSS3) is not fully supported by IE8, while `first-child` (CSS2) is fully supported. So, I would recommend to use `first-child`. A good explanation can be found here: http://stackoverflow.com/a/24657721/907420 – roNn23 Jan 16 '15 at 09:57
@roNn23, you could use both. It makes no difference when the element is really the first child, but if some sibling (other than a `p` element) is added before it, `p:first-of-type` keeps working. – Jukka K. Korpela Jan 16 '15 at 10:44

score 3 · Answer 2 · answered Jan 16 '15 at 09:34

You may use nth-child:

p:nth-child(2){ /*targets second p element*/
  color: red;
}

To use it for first paragraph, you may use :first-child

p:first-child{
   color: red;
}

To use it for last paragraph, you may use :last-child

You may learn more stuff here.

score 0 · Answer 3 · answered Jun 25 '23 at 11:33

0

This will only change the color of first

p:first-of-type{

}

answered Jun 25 '23 at 11:33

Syeda Muqadas

1

CSS change to only one paragraph - no extra classes

3 Answers3