How Does the CSS3 `:first-of-type` Selector Work with Class Names?

Using the CSS3 Selector :first-of-type with a Class Name

It's a common misconception that the CSS3 selector :first-of-type can be used in conjunction with a class name to select the first element with that specific class. However, this is not the case.

The :first-of-type pseudo-class targets the first element of its type among siblings. Therefore, using a class selector with :first-of-type selects the first element with that class that is also the first element of its type.

To illustrate:

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

This rule will turn the first paragraph of its parent element blue.

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

This rule will turn the first paragraph with the class "myclass1" red.

However, if there are multiple paragraphs with the class "myclass1," only the first paragraph will be affected by this rule, as it targets the first paragraph of its type that also has the specified class.

To select the first occurrence of a class, regardless of its type, there is no direct CSS3 selector available. Instead, a workaround involving multiple selectors and cascading can be employed:

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default color */; }

This solution works by setting the initial color for the element with the "myclass1" class. The subsequent rule then overrides the color for any other elements with the same class that are siblings of the first element.

In essence, remembering that :first-of-type targets the first element of its type, rather than the first element with a given class, is crucial when using it in CSS3 selectors.

The above is the detailed content of How Does the CSS3 `:first-of-type` Selector Work with Class Names?. For more information, please follow other related articles on the PHP Chinese website!