CODEWITHSUNDEEP
htmlcsscss-selectors
Ash
Ash

Reputation: 169

How to select a non unique element through CSS

EDIT:

Slight alteration to this question:

say i have a lot of paragraphs and other elements in a page:

<h2>title 1</h2>
<p>paragraph one</p>
<p>paragraph 2</p>
<p>paragraph 3 with a <href="dummy.com>hyperlink</a></p>
<h2>title 2 </h2>

How would i go about selecting the 2nd instance of a <p> only? or the 3rd instance?

The selectors i have come across only seem to work on a "first parent" or "first of class" basis.

Any ideas?

Original question:

I'm a bit of a CSS novice and am looking for some advice.

Say I have some HTML like the below:

<h2> Title 1 </h2>
<p>paragraph 1</p>
<h2>title 2 </h2>
<p>paragraph 2</p>

Is there any non JavaScript method using just CSS, that I can select paragraph 1 only and apply styling to this element independent of paragraph 2?

And if so, how supported is this functionality?

Sorry folks, i dont think i was quite clear with my requirements. I specifically need a technique that uses just CSS to select the HTML as it currently exists (with no classes or ids). For this particular bit of work, i wont have access to the on page HTML.

Upvotes: 0

Views: 1226

Answers (8)

Danield
Danield

Reputation: 125443

FWIW - Here's a solution without which will work in IE7+

Use the General sibling selector

p {
   /* styles first p here */
}
p ~ p {
  /* styles second (and additional) p here */
}


 p {
   color: tomato;
 }
 p ~ p {
   color: black;
 }
<h2> Title 1 </h2>
<p>paragraph 1</p>
<h2>title 2 </h2>
<p>paragraph 2</p>

Upvotes: 3

NickGames
NickGames

Reputation: 312

If you want to select the first paragraph element without using an id or class, use this:

p:first-of-type 
{  
color:yellow;
}
<h2> Title 1 </h2>
<p>paragraph 1</p>
<h2>title 2 </h2>
<p>paragraph 2</p>

Upvotes: 0

Sarath Kumar
Sarath Kumar

Reputation: 2353

Try this:

<style>
    .red {
        color:red; /* give more styles here*/
    }
</style>

<h2> Title 1 </h2>
<p class="red">paragraph 1</p>
<h2>title 2 </h2>
<p>paragraph 2</p>

Upvotes: 0

Leo
Leo

Reputation: 13828

You should use :first-of-type

p:first-of-type { 
    background-color: yellow;
}

While :first-child would not work, because <h2> Title 1 </h2> is the actual first child of their parent node.

Upvotes: 3

Kalilz
Kalilz

Reputation: 168

You need to use a class

<h2> Title 1 </h2>
<p class="my-class">paragraph 1</p>
<h2>title 2 </h2>
<p>paragraph 2</p>

Then in your CSS

.my-class{
    property1: value1;
    property2: value2;
}

You can also use an id (# selector in css sheets) but using class is better in case you need to apply the same style to something else. (You can't have 2 id with the same value in the same page)

Upvotes: 0

Benjamin
Benjamin

Reputation: 2670

You can use css psedo selector.

p:first-of-type{
   color: red;
}

Working Fiddle

Upvotes: 1

kapantzak
kapantzak

Reputation: 11750

If you want to select only the first

:

p:first-child {  }

Upvotes: 0

Awesomestvi
Awesomestvi

Reputation: 803

You can use the first-child selector

first-child selector selects and style every < p > element that is the first child of its parent:

Example:

p:first-child { 
    background-color: yellow;
}

Upvotes: 0

Related Questions