Add new information about recent CSS inheritance changes with CSS selection and highlight pseudo-classes #38989
Conversation
github-actions
bot
added
Content:CSS
|
Preview URLs Flaws (2)Note! 1 document with no flaws that don't need to be listed. 🎉 URL:
External URLs (1)URL:
(comment last updated: 2025-04-14 14:16:49) |
There was a problem hiding this comment.
@dbarabashh thanks for the contribution! I've added some thoughts on how I think this could be handled.
|
I made some changes and updated the text, but I have a feeling its a bit hard to understand. Considering less experienced developers, this explanation might be too complex. What do you think? /cc @chrisdavidmills |
There was a problem hiding this comment.
@dbarabashh It's getting there. A couple more comments for you.
I also wondered if you could link to this section from all the pseudo-element reference pages that follow this inheritance model?
github-actions
bot
added
size/m
There was a problem hiding this comment.
@dbarabashh thanks for your further work on this. The content is all there now, I think, I just had some suggestions on wording and ordering for you to look through. The bigger issue really is that the main explainer content is on the wrong page. I've included comments to help you put it on the right page, in the right place.
Thanks again.
| @@ -13,6 +13,100 @@ Pseudo-elements are prefixed with a double colon (`::`). You add pseudo-elements | |||
|
|
|||
| Pseudo-elements enable targeting entities not included in HTML and sections of content that cannot be targeted otherwise without adding extra markup. Consider the placeholder of an {{HTMLelement("input")}} element. This is an abstract element and not a distinct node in the document tree. You can select this placeholder by using the {{CSSXref("::placeholder")}} pseudo-element. As another example, the {{CSSXref("::selection")}} pseudo-element matches the content currently highlighted by a user, allowing you to style what is matched as the user interacts with the content and changes the selection. Similarly, the {{CSSXref("::first-line")}} pseudo-element targets the first line of an element, updating automatically if the character count of the first line changes, without having to query the element's line length. | |||
|
|
|||
| ## Description | |||
There was a problem hiding this comment.
OK, the biggest issue here is something I've only just noticed (sorry about that) — this content is on the wrong pseudo-elements page. This page is about the pseudo-elements module, and module pages just list information about is contained in that module. They don't include details like this. So, the first thing you should do is move this content to https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements — this is the main pseudo-elements landing page (but pseudo-elements, the concept, not pseudo-elements, the module).
Second thing — get rid of the "Description" heading, and promote "Highlight pseudo-elements inheritance" to an H2 (and promote the subheadings up a level).
I'd place the section on https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements, just above the "Specifications" section.
| } | ||
| ``` | ||
|
|
||
| #### Example |
There was a problem hiding this comment.
When you move this content up, as suggested above, don't include the "Example" heading.
| {{EmbedLiveSample("Example", "100%", "150")}} | ||
|
|
||
| > [!NOTE] | ||
| > The exact appearance of selected text may vary slightly between browsers. For detailed information about browser support and implementation details, see the [CSS Custom Highlight API](/en-US/docs/Web/API/CSS_Custom_Highlight_API) documentation. |
There was a problem hiding this comment.
I still don't understand how this note helps us find information about support for the different highlight pseudo-elements. I mean, it lists ::highlight() information, but what about the others? I'd suggest just removing it, or saying that you should consult the reference pages for the different pseudo-classes.
Co-authored-by: Chris Mills <[email protected]>
Co-authored-by: Chris Mills <[email protected]>
Co-authored-by: Chris Mills <[email protected]>
Co-authored-by: Chris Mills <[email protected]>
Co-authored-by: Chris Mills <[email protected]>
Co-authored-by: Chris Mills <[email protected]>
Fix #36458