CSS Tricks Almanac - Define/Explain Selectors and Properties
Selectors are the first part of a CSS rule. They tell the browser which HTML elements to apply the rule to. The CSS property is the part of the rule that tells the browser what property is being set. For example, background-color or font-size. Each property is then given a value. So, in CSS a complete rule will have the selector (HTML element being selected), the property (the style that is being set), and the value (the value being given to the property).
Selectors
- ::placeholder-This selector is a pseudo-element that allows you to style the placeholder text of a form element.
- :focus-visible-This is a pseudo-class that allows you to bring attention to the element that currently has the focus. It is in a working draft form at the moment. It is used for accessability purposes. In the case that some one might be using their keyboard as a way of tabbing through a site.
Properties
- content-visibility-This property tells the browser whether an elements contents should be visible at the time of loading. This allows the browswer not to load the content until it is needed. It is a preformance enhancing property.
- accent-color-This property is currently in CSS4 as a working draft. The concept of this property is to allow the browswer to retint accented colors of form controls with a custom color value.
Summary
In CSS the ability to style an element with specificity is important. The selectors allow the designer to identify with specificity what elements are to be selected for styling. The properties allow the designer to specify exaclty how those elements will be affected with styling. The combination of selector and property allow the designer the precision they need when styling their site.