:first-child The purpose of the selector is, as the name suggests, to select the first child tag of the parent tag. So this example works (just tried it on here):

    
first
    
second

However, this method does not work if you nest the tags under different parent tags, or your red class tag is not the first tag under the parent tag.

Also note that this not only applies to the first such tag in the entire document, but also every time there is a new parent tag surrounding it, for example:

    
first
    
second


    
third
    
fourth

first and third will be red.

For your case you can use :nth-of-type selector:

.red:nth-of-type(1)
{
    border:5px solid red;
} 

    blah
    
first
    
second
    
third
    
fourth

This is one of the most famous examples of authors misunderstanding how :first-child works. Introduced in CSS2, :first-child pseudo class represents the first child of its parent. That's it. There is a very common misconception that it selects the first child element that matches the criteria specified by the rest of the compound selector. Due to the way selectors work (see here for an explanation), this is simply not true.

Selector level 3 introduces the :first-of- type pseudo-class , representing the first element among its siblings of element type. This answer explains the difference between :first-child and :first-of-type with pictures and text. However, like :first-child, it does not look at any other conditions or properties. In HTML, element types are represented by tag names. In the question, the type is p.

:first-of-class pseudo-class to match the first child element of a given class. When this answer was first posted, the newly released FPWD selector level 4 introduced the :nth-match() pseudo-class , which was designed around the existing selector mechanism, as As I mentioned in the first paragraph, by adding the selector list parameter you can provide the rest of the selector compound selector to get the desired filtering behavior. In recent years, this functionality has been incorporated into :nth-child( ) itself , with the selector list appearing as an optional second argument, to simplify things and avoid :nth- match() False impression of matching across the entire document (see final comment below) .

cross-browser support (seriously, it's been almost 10 years, and there's only been one implementation in the past 5 years), here's a workaround Lea Verou and I developed independently (she did it first!) by first applying the style you want to all elements of that class:

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

to override the generic sibling combinator in the rule ~:

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

class="red" will have a border.

Here are instructions on how to apply the rules:

.home > .red {
    border: 1px solid red;
}

.home > .red ~ .red {
    border: none;
}

  blah         
  
first
  
  
second
 
  
third
  
  
fourth