ansaurus

Question

How to give same style to first 2 paragraphs differently in css

Answer 1

+3 A:

Go here, and try this code out :)

http://www.w3schools.com/css/tryit.asp?filename=trycss%5Ffirst-child1

p:first-child
{
    color:blue;
} 
p:first-child + p
{
    color: red;
}

Timothy Khouri 2009-12-28 03:31:05

+1 for beating me and the tryit link.

Moshe 2009-12-28 03:32:33

no it's not styling first 2 paragraph same

metal-gear-solid 2009-12-28 03:33:33

I hope your kidding ... I intentionally made the second one red and the first one blue to show you which of the above CSS selectors was affecting which paragraph tag.Make the second one say "blue" instead of "red".

Timothy Khouri 2009-12-28 03:37:12

oh, sorry yes u are right. it's working . thanks. can u tell what is the solution if i want to style like first 3 <p> or first 4 <p>.

metal-gear-solid 2009-12-28 03:41:57

@Jitendra - try adding + p to the *p:first-child + p* for each additional p you want to style. (You also need a new set of curly braces and rules.)

Moshe 2009-12-28 03:43:38

@Moshe - Thnaks. it's working - p:first-child, p:first-child + p, p:first-child + p + p{color:blue;}

metal-gear-solid 2009-12-28 03:47:33

Answer 2

+2 A:

first of all, ID's need to be unique on a page. You can't use id="hello" twice. You need to use class for that. Try:

<html>
<head>
<style type="text/css" media="screen">
.hello { color: blue; }
</style>
</head>
<body>
  <p class="hello">first paragraph</p>
  <p class="hello">second paragraph</p>
  <p>third paragraph</p>
 </body>
</html>

Moshe 2009-12-28 03:32:11

id removed it was added mistakenly

metal-gear-solid 2009-12-28 03:35:46

Answer 3

+2 A:

It depends on what browsers you want to be compatible with. The latest versions of Firefox, Safari, Chrome, and Opera all support the nth-of-type pseudo-element, but IE does not yet (it is a CSS 3 feature, which IE does not support much of). If you can limit yourself to these browsers, the following should work, otherwise, you'll need to use one of the solutions from one of the other answers.

p:nth-of-type(1), p:nth-of-type(2) { color: red }

Brian Campbell 2009-12-28 03:34:58

Nice tut, but CSS3 is not widely supported enough. Ah well, +1 anyways for the interesting lesson ni CSS3

Moshe 2009-12-29 00:18:36

Yes, I'm aware that CSS3 isn't widely supported enough. I wanted to document this solution for the future, or for people who are targeting only a dingle platform, even though it's impractical for the web as a whole right now.

Brian Campbell 2009-12-29 00:23:42

ansaurus

tags:

views:

answers:

How to give same style to first 2 paragraphs differently in css

related questions