CSS glossary entries for ‘C’

Cascade: In CSS, the cascade is a concept which describes the way in which CSS processors, like browsers, combine all valid CSS rules from any valid source into a single in-memory stylesheet and then resolve ‘conflicts’ between individual styling instructions (‘property-value pairs’) by evaluating the following factors in the following order: 1. ‘source’ (or ‘origin’), 2. ‘importance’, 3. ‘specificity’, and 4. ‘order’. Any individual instruction which is found to be more powerful than those with which it conflicts, for a given factor, is immediately implemented, i.e. it is not tested for the later factors. For example, if an instruction is found to come from a more important source than the ones with which it conflicts, it is never evaluated for its importance, specificity, or order. It just ‘falls through’ the test procedure and its effects are rendered on the screen.
Case-sensitivity selector: The case-sensitivity selector (E[foo="bar" i]) is a proposed CSS4 selector which makes ‘attribute selector’ matches case-insensitive.
Checked state selector: The checked state selector (E:checked) is a CSS ‘pseudo-class selector’ which only targets radio and checkbox type <input> elements and only when they are in the selected state. If the radio button or checkbox is not selected or checked, there is no match. It's primary purpose is to allow designers to change the display of these form elements, according to their state. However, because browsers always track the state of radio buttons and checkboxes, the checked state selector is sometimes used to toggle layouts in which these inputs are never rendered, i.e. to create dynamic layouts without using JavaScript.
Child selector: The Child selector (E>F) is a CSS selector which only targets given elements that are immediate descendants (children) of a given antecedent in the browser ‘DOM’, i.e. the targeted element must be nested directly inside the given parent. The child selector is most commonly used to ensure that styles only affect given elements at a specific level in the document structure. Unlike the simple ‘descendant selector’, child selectors only ever affect one level in the document hierarchy, e.g. only the second level of a nested list, such as a ‘dropdown menu’.
Class selector: The Class Selector (.classname) is a CSS selector which targets all the elements in a named group, i.e. all elements with given class name as the value of their class attribute. The generic selector for all members of a class is simply, a dot (full-stop) followed by the class name. For example, .warning{} would select every element with class="warning" in its opening HTML element tag, regardless of the element type and regardless of which additional named classes the element might belong to. The class selector is frequently used in combination with the type selector, to create a sub-class, all of whose members are of exactly the same type, e.g. p.warning {} selects only the paragraphs in the warning class, even if that class also includes other elements such as h2s or uls.
clear: The clear property is a CSS property which requires the browser to position the top ‘border edge’ of the selected layout box under the bottom ‘margin edge’ of preceding ‘float boxes’.
Clearfix: A clearfix is a chunk of CSS code which ensures that the content of a CSS container does not overflow into or out of a ‘float’ layout box. Clearfix recipes are often packaged as ‘mixins’ for CSS preprocessors like ‘less’ and ‘sass’. Most recent clearfix recipes use the ‘before selector’ and the ‘after selector’ to apply styling at the beginning and end of the container which they are protecting from overflow effects.
color: The color property is a CSS property which sets the (foreground) colour of textual content, i.e. the font glyphs.
Column selector: The column selector (E:column(selector)) is a proposed CSS4 ‘pseudo-class selector’ targets an element that is a cell in a grid/table belonging to a column represented by an element which matches the nested selector shown in parentheses.
Combinator: A Combinator is a CSS selector which combines 2 or more discrete CSS selectors to match an element more specifically than either of the individual selectors could do. See ‘specificity’
Containing element: In CSS, the containing element is the ancestor of a selected element, within which the selection is positioned. Which ancestor constitutes the containing element varies according to the selected element's positioning type. For ‘statically positioned’ and ‘relatively positioned’ blocks, the containing element is its parent. For ‘fixed positioned’ blocks, the containing element is the ‘viewport’. For ‘absolutely positioned’ blocks, the containing element is the nearest non-static ancestor. If no element other than the selected one has a non-static position, the containing element will be the ‘viewport’.
Contains (hyphen-separated) selector: The Contains (hyphen-separated) selector (E[attr\|="value"]) is a CSS ‘attribute selector’ which targets elements which have the given attribute, so long as that attribute has a hyphen-separated list of values beginning (from the left) with the specified pattern. In practice, this selector is used, almost exclusively, for targeting the initial part of ‘language attribute’ (lang) values, e.g. to select lang=en-gb and lang=en-us and lang=en-ca ... etc.
Contains selector: The Contains selector (E[attr~="value"]) is a CSS ‘attribute selector’ which targets all the elements in a document which have the specified attribute so long as the attribute's value contains the specified expression and the expression is separated from other components of the value by space characters.
content: The content property is a CSS2 property which specifies the content which browsers inject into the rendered version of a web page within ‘pseudo-elements’. It is typically used in CSS ‘rules’ that begin with the ‘before selector’ or 'after selector. The ‘value’ of the content property is a ‘double quoted’ text string.
Content edge: The content edge is the outer edge of the content area in a CSS ‘layout box’. If that box has padding, the content edge is the boundary between the content and padding areas. If the box has a border, but no padding, the content edge marks the boundary between the content area and the border. If the box has neither padding nor borders, but does have margins, the content edge marks the boundary between the content area and the margin area.
content-box: In CSS, the content-box is the area occupied by a 'layout box's content. Its outside is bounded by the ‘content edge’. Its width and height are determined by the CSS ‘width’ and ‘height’ properties.
CSS preprocessor: A CSS preprocessor is a computer program which allows designers to write web styling instructions in an easier and richer syntax than that provided by standard CSS. Popular features provided by CSS preprocessors include nested styling ‘rules’, ‘mixins’, ‘variables’ and ‘functions’. Instructions written in the pre-processor's alternative syntax are converted by the program into standard CSS for use on the published version of websites. The two most well-known CSS preprocessors are called ‘Sass’ and ‘Less’. Both offer the option to automatically convert edits to standard CSS when they are saved and the option to do the conversion as a separate batch process. ‘Sass’ and ‘Less’ provide different syntaxes for writing styling instructions, but both syntaxes and the concepts they employ are quite similar.
Curly brackets: See ‘braces’.