Shorten verbose CSS that repeats combinations of elements and pseudo-classes

by

You can combine the selectors using :is() and comma ,

.tr1 th:is(:nth-child(1),:nth-child(5)),
:is(.tr2,.tr4) td:is(:nth-child(2),:nth-child(4)),
.tr3 td:nth-child(3) {background-color:green}

.tr1 th:is(:nth-child(1),:nth-child(5)):hover,
:is(.tr2,.tr4) td:is(:nth-child(2),:nth-child(4)):hover,
.tr3 td:nth-child(3):hover {background-color:hotpink}

.tr1 th:is(:nth-child(1),:nth-child(5))::selection,
:is(.tr2,.tr4) td:is(:nth-child(2),:nth-child(4))::selection,
.tr3 td:nth-child(3)::selection {color:hotpink}

More Related Contents:

  1. Is there a CSS selector for elements containing certain text?
  2. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  3. nth-of-type vs nth-child
  4. ::slotted CSS selector for nested children in shadowDOM slot
  5. nth-child doesn’t respond to class [duplicate]
  6. Select elements by attribute in CSS
  7. Nesting CSS classes
  8. CSS attribute selectors: The rules on quotes (“, ‘ or none?)
  9. Is the CSS :not() selector supposed to work with distant descendants?
  10. What is the difference between ‘>’ and a space in CSS selectors?
  11. SASS: randomly pick background-image from a list
  12. Combining :last-child with :not(.class) selector in CSS
  13. Is there a workaround to make CSS classes with names that start with numbers valid? [duplicate]
  14. Why can’t you group descendants in a CSS selector?
  15. bootstrap 3 responsive table with fixed first column
  16. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  17. Not CSS selectors
  18. CSS Selector for nth range?
  19. What is this CSS selector? [class*=”span”]
  20. CSS selector (id contains part of text)
  21. Is there any pros and cons if i use always CSS Class instead CSS ID for everything?
  22. Is there such a thing as an “all inclusive sibling” CSS selector?
  23. CSS selector involving pseudo class first-child and dropcap
  24. How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?
  25. Targeting position:sticky elements that are currently in a ‘stuck’ state
  26. Select odd even child excluding the hidden child
  27. Is there an opposite CSS pseudo-class to :hover?
  28. Comma in CSS, multiple selectors using the same CSS
  29. Can I target all tags with a single selector?
  30. :last-child pseudo-class mixed with attribute selector not working

Leave a Comment