- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
Usage of :first-child pseudo-class in CSS
Use the :first-child pseudo class to add special style to an element that is the first child of some other element.
Example
You can try to run the following code to understand the usage of :first-child pseudo class −
<html>
<head>
<style>
div > p:first-child
{
text-indent: 25px;
}
</style>
</head>
<body>
<div>
<p>First paragraph in div. This paragraph will be indented</p>
<p>Second paragraph in div. This paragraph will not be indented</p>
</div>
<p>But it will not match the paragraph in this HTML:</p>
<div>
<h3>Heading</h3>
<p>The first paragraph inside the div. This paragraph will not be effected.</p>
</div>
</body>
</html>
- Related Articles
- The :first-child Pseudo-class in CSS
- Usage of CSS :focus pseudo-class
- Usage of :link pseudo-class in CSS
- Usage of :visited pseudo-class in CSS
- Usage of :hover pseudo-class in CSS
- Usage of :active pseudo-class in CSS
- Usage of :lang pseudo-class in CSS
- Usage of CSS :first-line pseudo-element
- The :last-child Pseudo-class in CSS
- The :nth-child Pseudo-class in CSS
- :active pseudo class in CSS
- visited pseudo class in CSS
- Difference Between Pseudo-Class and Pseudo-Element in CSS
- CSS :first-letter pseudo-element
- The :lang Pseudo-class in CSS
Advertisements