:first-child (CSS selector)

Description

This pseudo-class matches an element only if it’s the first child element of its parent element. For instance, li:first-child matches the first list item in an ol or ul element. It doesn’t match the first child of a list item. For example, let’s take the CSS selector mentioned above:

li:first-child {
  ⋮ <span>declarations
</span>}

And let’s apply it to the following markup:

<ul>
  <li>This item matches the selector li:first-child.</li>
  <li>This item does not match that selector.</li>
  <li>Neither does this one.</li>
</ul>

Only the first list item element is matched. Note that this pseudo-class only applies to elements—it doesn’t apply to anonymous boxes generated for text.

Example

This example selector matches the first list item in an ol or ul element:

li:first-child {
  ⋮ <span>declarations
</span>}

Frequently Asked Questions (FAQs) about CSS :first-child Selector

What is the difference between :first-child and :first-of-type in CSS?

The :first-child selector in CSS targets the first child element within its parent. It doesn’t consider the type of element. For instance, if you have a div element followed by a p element inside a parent element, using :first-child will target the div element as it’s the first child of its parent.

On the other hand, :first-of-type targets the first occurrence of a specific type of element within its parent. So, if you use :first-of-type for a p element, it will target the first p element, regardless of whether it’s the first child of its parent or not.

Can I use the :first-child selector with classes?

Yes, you can use the :first-child selector with classes in CSS. For instance, if you want to select the first child of a specific class, you can use the syntax “.classname:first-child”. This will select the first child element of the class “classname”.

How does the :first-child selector work with nested elements?

The :first-child selector only considers direct children of a parent element. If there are nested elements, it will not consider them. For example, if you have a div element inside another div element, and you use the :first-child selector, it will only consider the first div element, not the nested one.

Is there a :last-child selector in CSS?

Yes, there is a :last-child selector in CSS. It works similarly to the :first-child selector, but instead of selecting the first child of a parent element, it selects the last child.

Can I use the :first-child selector with pseudo-elements?

No, you cannot use the :first-child selector with pseudo-elements. Pseudo-elements are used to style specific parts of an element, such as the first letter or line of a text block, and they are not considered children of an element.

How is the :first-child selector used in responsive design?

The :first-child selector can be used in responsive design to style the first child element differently depending on the screen size. For example, you can use it to change the color, font size, or layout of the first child element when the screen size changes.

Can I combine the :first-child selector with other selectors?

Yes, you can combine the :first-child selector with other selectors in CSS. For example, you can use it with the class selector to target the first child of a specific class, or with the element selector to target the first child of a specific type of element.

Does the :first-child selector have any browser compatibility issues?

The :first-child selector is supported by all modern browsers, including Chrome, Firefox, Safari, and Edge. However, it is not supported by Internet Explorer 8 and earlier versions.

Can I use the :first-child selector to target text nodes?

No, the :first-child selector cannot target text nodes. It can only target element nodes. If you want to style text nodes, you need to wrap them in an element and then target that element.

How does the :first-child selector handle whitespace?

The :first-child selector ignores whitespace. It only considers element nodes, not text nodes. So, if you have whitespace before the first child element, it will not affect the :first-child selector.

The above is the detailed content of :first-child (CSS selector). For more information, please follow other related articles on the PHP Chinese website!