CODEWITHSUNDEEP
htmlcss
winseybash
winseybash

Reputation: 702

CSS change to only one paragraph - no extra classes

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.

Upvotes: 0

Views: 9950

Answers (3)

Syeda Muqadas
Syeda Muqadas

Reputation: 1

This will only change the color of first

p:first-of-type{

}

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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.

Upvotes: 3

roNn23
roNn23

Reputation: 1662

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>

Upvotes: 3

Related Questions