Home > Web Front-end > CSS Tutorial > Usage of :first-child pseudo-class in CSS

Usage of :first-child pseudo-class in CSS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release: 2023-09-05 10:49:02
forward
1337 people have browsed it

CSS 中 :first-child 伪类的用法

Use the :first-child pseudo-class to add special styles to elements that are the first child of other elements.

Example

You can try running 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>
Copy after login

The above is the detailed content of Usage of :first-child pseudo-class in CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template