You can use CSS pseudo selectors to change specific HTML elements.

The span[class~="sr-only"] selector will select any span element whose class includes sr-only.

The CSS clip property is used to define the visible portions of an element. 

The clip-path property determines the shape the clip property should take.

The :first-of-type pseudo-selector is used to target the first element that matches the selector.

The :last-of-type pseudo-selector does the exact opposite - it targets the last element that matches the selector.

The calc() function is a CSS function that allows you to calculate a value based on other values. For example, you can use it to calculate the width of the viewport minus the margin of an element:
.exampleClass {
  margin: 10px;
  width: calc(100% - 20px);
}

Adding position sticky moved the element into its own stack. To ensure your element does not get hidden by different stacks, add a z-index.

The :not() pseudo-selector is used to target all elements that do not match the selector.

The border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML.

The [attribute="value"] selector targets any element that has an attribute with a specific value. 

The key difference between tr[class="total"] and tr.total is that the first will select tr elements where the only class is total. The second will select tr elements where the class includes total.

The :nth-of-type() pseudo-selector is used to target specific elements based on their order among siblings of the same type.

Vertically align the text to the top, horizontally align the text to the right.
	text-align: right;
	vertical-align: top;