CSS glossary entries for ‘D’

Declaration: A declaration is one of the 2 essential components of a CSS ‘rule’. It determines the styles to be applied to elements specified in the same rule's ‘selector’. The beginning and end of a declaration is bounded by an opening and closing ‘brace’, respectively. The content of a declaration consists of one or more ‘property-value pairs’, separated from one another by semi-colons.
Default selector: The default selector (E:default) is a proposed CSS4 ‘pseudo-class selector’ which targets elements that are the default among a group of similar elements, e.g. the default item of a select list or menu.
Descendant selector: The Descendant selector (E E) is the simplest CSS ‘Relationship Selector’ and a ‘Combinator’. It targets the final (rightward) selected element only if that element is contained within the previous element, i.e. only if the right hand component of the selector (an element) is a descendant of the component immediately to its left (also, an element). Descendent selectors must have at least 2 space-separated components, but can have as many further space-separated components, as the designer deems necessary. For example, header h1 em would select only <em> elements that occur inside <h1> elements, so long as the <h1> itself is contained within a <header> element. Because descendant selectors combine two or more selectors, they are known as combinators. They are, however, other combinators which combine individual element selectors in different ways, e.g. the ‘Child Selector’, the ‘Directly Adjacent Selector’, the ‘Indirectly Adjacent Selector’, the ‘Reference Combinator Selector’ and the ‘Subject Selector’. N.B. All combinators are, intrinsically, ‘Relationship Selectors’
device-aspect-ratio: The device-aspect-ratio property is a CSS3 property used in ‘media queries’ to limit a set of styling styles to devices with matching aspect ratios. For example, the following ‘media query’ restricts its declared styles to devices which have a 16:9 ratio screen: @media screen and (device-aspect-ratio: 16/9) { ... }
Directionality selector: The directionality selector (E:dir()) is a proposed CSS4 ‘pseudo-class selector’ which enables designers to target textual content based on the directionality of the element, which itself depends on the directionality of the document language. A parameter of ltr would select only matching elements that were written in a left-to-right language, whereas rtl would select elements written in left-to-right languages.
Directly adjacent selector: The Directly adjacent selector (E+E) is a CSS ‘relationship selector’ which targets elements if they directly follow the previously specified element. For example h2+p would select all the paragraphs within a document that immediately follow a section heading. It would explicitly exclude the second and subsequent elements after the same section headings. Which is why it is often, and more usefully, known as the ‘Immediate Sibling selector’. This selector is significantly more fragile than the ‘Indirectly Adjacent selector’ (also know as the ‘Subsequent Sibling selector’), because it will stop working if a new element is added dynamically between the two elements specified.
Disabled state selector: The disabled state selector (E:disabled) is a CSS4 ‘pseudo-class selector’ which targets elements that are in a disabled state, i.e. toggled ‘off’.
display: The display property is a CSS property which allows designers to change the layout model and box model used to style selected ‘layout boxes’. Elements that are displayed as ‘inline boxes’ by default (e.g. form ‘input’ elements) can be displayed as ‘block boxes’ and vice versa (e.g. list items can be displayed inline).
display:inline: Enforces inline display and horizontal stacking on HTML elements that are not displayed inline by default and are stacked vertically by default. It is most commonly used to enforce inline display on ‘block level elements’
display:table-cell: Requires the CSS rendering engine to lay out selected elements as if they were table cells, i.e. their default width is determined by box content (rather than offset from parent width) and their height is automatically adjusted to match the height of the tallest element in the same row of cell-like boxes.
Double colon selectors: A double colon selector is a CSS3 ‘pseudo-element selector’. For all practical purposes, double colon selectors work in exactly the same way as CSS2 ‘single colon selectors’ for ‘pseudo elements’ with almost identical names. The only real difference between them is that the extra colon allows ‘pseudo-class’ and ‘pseudo-element’ selectors to be distinguished syntactically. Double colon selectors include the ‘first line selector’ (E::first-line), the ‘after selector’ (E::after), the ‘before selector’ (E::before) and the ‘first letter selector’. Since all modern browsers treat them identically to single colon variants of the same name, you virtually never see them in production stylesheets.