Skip to content

Commit

Permalink
Pseudo-elements: pendantic explaination (#28089)
Browse files Browse the repository at this point in the history
* Pseudo-elements: pendantic explaination

* space

* Update files/en-us/learn/css/howto/highlight_first_line/index.md

Co-authored-by: Hamish Willee <[email protected]>

---------

Co-authored-by: Hamish Willee <[email protected]>
  • Loading branch information
estelle and hamishwillee authored Jul 21, 2023
1 parent a3de430 commit f1a3940
Showing 1 changed file with 3 additions and 1 deletion.
4 changes: 3 additions & 1 deletion files/en-us/learn/css/howto/highlight_first_line/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,12 @@ In this case we need to use the {{cssxref("::first-line")}} pseudo-element. It s
## Combining pseudo-elements with other selectors

In the example above, the pseudo-element selects the first line of every paragraph. To select only the first line of the first paragraph, you can combine it with another selector. That could be a class, or in this case the {{cssxref(":first-child")}} {{cssxref("pseudo-classes", "pseudo-class")}}. This allows us to select the first line of the first-child of `.wrapper`.
In the example above, the pseudo-element selects the first line of every paragraph. To select only the first line of the first paragraph, you can combine it with another selector. In this case, we use the {{cssxref(":first-child")}} {{cssxref("pseudo-classes", "pseudo-class")}}. This allows us to select the first line of the first child of `.wrapper` if that first child is a paragraph.

{{EmbedGHLiveSample("css-examples/howto/highlight_first_line2.html", '100%', 700)}}

> **Note:** When combining pseudo-elements with other selectors in a [complex](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#complex_selector) or [compound](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#compound_selector) selector, the pseudo-elements must appear after all the other components in the selector in which they appear.
## See also

- The {{cssxref("pseudo-elements", "pseudo-elements")}} reference page.
Expand Down

0 comments on commit f1a3940

Please sign in to comment.