1

Is there a way to more succinctly write CSS rules like these?

1)

th a, td.unsubmitted a, td.submitted a, td.graded_recent a, td.is_late a {
    color:white
}

th a:hover, td.unsubmitted a:hover, td.submitted a:hover, td.graded_recent a:hover, td.is_late a:hover {
    color: white;
    font-weight: 1000;
    text-shadow: 1px 1px #2D3B45;
}

.tooltip:hover .ttt_assignment, .tooltip:hover .ttt_status, .tooltip:hover .ttt_grade, .tooltip:hover .ttt_date {
            visibility: visible;
        }
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
BenH
  • 61
  • 8

1 Answers1

1

If you use a CSS preprocessor then yes. Sass allows you to use blocks of CSS for rules that share the same parent:

.tooltip:hover {
  .ttt_assignment, .ttt_status, .ttt_grade, .ttt_date {
    visibility: visible;
  }
}

In my opinion this makes cases like these much easier to read. Though will it mean you write less code? It's tough to say!

Eddie Reeder
  • 805
  • 1
  • 7
  • 13
  • I'm newer to CSS. A preprocessor is essentially an external program I write my code in and then it will compile it to CSS? Meaning that even if I use one for *my* writing, when someone looks at the source of my page it will be compiled into an expanded format like in my original examples? I'm looking for a way to do this straight CSS...if not available then OK, I just want to make sure my native CSS is as precise as it can be with these examples. – BenH Oct 09 '20 at 20:31
  • For just native CSS you may have the best you can get. This [answer](https://stackoverflow.com/questions/6893318/css-shorthand-to-identify-multiple-classes) proposes using something like `.tooltip:hover:matches(.ttt_assignment, .ttt_status, .ttt_grade, .ttt_date)`, but as mentioned I'm not sure how broad the browser support is for that syntax. – Eddie Reeder Oct 09 '20 at 21:14