CSS Tricks Almanac

Selectors and Properties

Selectors: Selectors are keywords used in CSS to select a certain element in the code. Selectors often use a colon (:) or double colon (::) to preface the selector name. Other versions of selectors (combinators) use characters like >, ~, or +. Selectors also include a period (.) which selects a class, the hash/number symbol (#) which selects an ID, or a asterisk (*) as a universal selector. Selectors allow you to very specifically select an element. By being able to be very specific, you can isolate an individual element to apply CSS to.

Properties: Properties are the actual attributes of the selected elements that are being altered with the CSS. Each element has various properties like color, width, margin, etc. that can be changed.


Selectors

:disabled - This selector is a psedo-class. It is often used with form fields or buttons to make the field or button in accessible. When one of these elements are disabled, no input can be put in this field, and the button can not be clicked. The opposite of this selector is :enabled.

:marker - This selector is a pseudo-element and it is used to give different style properties to the marker (e.g. a number, a dot, etc.) in list items. It can be applied to both a <ul> and <ol> list types. One neat feature is that you can use the :marker selector along with the content property to create a unique list marker, like a special character, emoji, etc. Additionally, you can use the display property with a value of list-item along with the content property control more aspects of the list marker (such as making it a counter).

Properties

z-index - This property controls the position in the layers from front to back of an element. Using this property allows you to overlap different elements to create a layered effect. The higher the number value of the z-index, the further to the front/top of the layers it will be. This property does not affect an element that has a position of static.

visibility - This property controls whether an element is shown or not. It has 3 values: visibile, hidden, and collapse. By using visible, the element will be seen. This is the default value. The hidden value will hide the selected element, even though it is still there, taking up space on the page. It was interesting to learn that this property is not inherited by default, so technically a child element could be still visible, even if the parent is marked hidden. The collapse value is used only for table rows or columns to hide (or collapse) them. By using this, it does NOT leave the space where the row/column was but instead collapses it. It is not widely used or really recommended to be used.


Summary

This page was a really interesting resource to learn about all of the options for selectors and properties. There were so many that I had never heard of before and it was interesting to go through a bunch of them to read more. Even some that I knew of and have used for years had extra information that I didn't know was possible with it. This is definitely a reference I will keep handy!