CSS Selectors & Properties

backdrop-filter
The backdrop-filter CSS property is used to edit the appearance of an element's background. It can take on any of the filter attributes but it applies them just to the background of the object.
🔗Can I Use Reference

Example in use:

This is an example of a regular block of text within a div that has no backdrop-filter property applied. It only has a background color applied with transparency.

This is an example of a regular block of text within a div that has the backdrop-filter property applied. The background has been filtered to use that same background color with transparency but add a blur filter.

caret-color
The caret-color CSS property lets you change the color of the flashing cursor in a text box.
🔗Can I Use Reference

Example in use:

empty-cells
The empty-cells CSS property is set in the table attribute and will display empty cells without the background or border formatting on them. The default value for this is show. To remove the cell formatting, set it to hide.
🔗Can I Use Reference

Example in use:

This is a table with the default of show for all cells.
Option 1 Option 2 Option 3
1 4
6 2
This is a table with the default of hide for empty cells.
Option 1 Option 2 Option 3
1 4
6 2
:has()
The :has() CSS selector selects the parent of the item that is in the parenthesis.
🔗Can I Use Reference

Example in use:

I used the :has() selector in the code of this page to select the links that have the code tag as a parent. This is what styled the main section header titles for each selector/property that I used. It styled the link to remove text decoration on those items. Here is the CSS used:

a:has(code) {
   text-decoration: none;
}
initial-letter
The initial-letter CSS property is used to style the initial letter of a paragraph or title. This is still in working draft so it is not viewable in all browsers. Please view in Chrome, Edge, or Safari.
🔗Can I Use Reference

Example in use:

This paragraph shows how the initial-letter property can be used to make the first letter larger. The property tells how many lines the letter should take up. The number given to the property represents how many lines it spans. In this case, I used initial-letter: 3.

writing-mode
The writing-mode CSS property allows you to change the direction of how the text is displayed. It takes in the values of horizontal-tb (the default setting), vertical-rl, and vertical-lr, where tb = top/bottom, rl = right/left, and lr = left-right.
🔗Can I Use Reference

Example in use:

This paragraph is the using the default of writing-mode: horizontal-tb. This property does not need to be set as it will do this automatically.

This paragraph is using writing-mode: vertical-rl to display this text verically reading from right to left.