Targeting text nodes with CSS

by

Only text that is wrapped in HTML tags can be targeted by CSS.

Your text that is not explicitly wrapped by HTML tags is algorithmically wrapped by anonymous boxes. These boxes may inherit styles, but they cannot be targeted by CSS.

From the spec:

9.2.1.1 Anonymous block
boxes

The properties of anonymous boxes are inherited from the enclosing
non-anonymous box. Non-inherited properties have their initial value.

If adding HTML tags around your anonymous text is not an option, consider setting the text styles on the container. For the elements that can be targeted, you can then override the container styles. Of course, this method will fall flat if you want the text to have display: none.

More Related Contents:

  1. Understanding CSS selector priority / specificity
  2. CSS Pseudo-classes with inline styles
  3. CSS negation pseudo-class :not() for parent/ancestor elements
  4. How can I select the last element with a specific class, not last child inside of parent?
  5. Are class names in CSS selectors case sensitive?
  6. Why doesn’t table > tr > td work when using the child selector?
  7. CSS selector by inline style attribute
  8. Matching the first/nth element of a certain type in the entire document
  9. :last-child not working as expected?
  10. Using CSS :before and :after pseudo-elements with inline CSS?
  11. Using :before and :after CSS selector to insert HTML [duplicate]
  12. :nth-child(even/odd) selector with class [duplicate]
  13. How to CSS: select element based on inner HTML [duplicate]
  14. What is the performance impact of the universal selector?
  15. What are the priorities among CSS selectors
  16. Why is nth-child selector not working?
  17. CSS selector with period in ID
  18. Can a ::before selector be used with a ?
  19. Is it possible to use CSS vars in CSS3 selectors?
  20. What is the ::content/::slotted pseudo-element and how does it work?
  21. CSS Selector “(A or B) and C”?
  22. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?
  23. How do I select an element that has a certain class?
  24. Selecting the last element among various nested containers
  25. Zebra striping a flexbox table with wrapping items
  26. CSS attribute selector does not work a href
  27. How to use nth-child for styling with a table with rowspan?
  28. CSS Selector for No-Children-But-Not-Empty
  29. How to select classes with spaces
  30. CSS nth-match doesn’t work

Leave a Comment