Dev Stack Source

The scrollbar-width property allows the author to set the maximum thickness of an element’s scrollbars when they are shown. Initial value auto Applies to scrolling boxes Inherited no Computed value as specified Animation type discrete Syntax /* Keyword values */ scrollbar-width : auto ; scrollbar-width : thin ; scrollbar-width : none ; /* Global values */ scrollbar-width : inherit ; scrollbar-width : initial ; scrollbar-width : unset ; Values <scrollbar-width> Defines the width of the scrollbar as a keyword. It must be one of the following values: auto The default scrollbar width for the platform. thin A thin scrollbar width variant on platforms that provide that option, or a thinner scrollbar than the default platform scrollbar width. none No scrollbar shown, however the element will still be scrollable. Note : User Agents must apply any scrollbar-width value set on the root element to the viewport. Accessibility concerns Use this property with...

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements. /* Selects any <p> that is the first element of its type among its siblings */ p:first-of-type { color : red ; } Note : As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required. Syntax :first-of-type Examples Styling the first paragraph HTML < h2 > Heading </ h2 > < p > Paragraph 1 </ p > < p > Paragraph 2 </ p > CSS p:first-of-type { color : red ; font-style : italic ; } Result Nested elements This example shows how nested elements can also be targeted. Note that the universal selector ( * ) is implied when no simple selector is written. HTML < article > < div > This `div` is first! </ div > < div > This < span > nested `span` is first </ span > ! </ div > < div > This < em > ...

The :first-child CSS pseudo-class represents the first element among a group of sibling elements. /* Selects any <p> that is the first element among its siblings */ p:first-child { color : lime ; } Note : As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required. Syntax :first-child Examples Basic example HTML < div > < p > This text is selected! </ p > < p > This text isn't selected. </ p > </ div > < div > < h2 > This text isn't selected: it's not a `p`. </ h2 > < p > This text isn't selected. </ p > </ div > CSS p:first-child { color : lime ; background-color : black ; padding : 5px ; } Result Styling a list HTML < ul > < li > Item 1 </ li > < li > Item 2 </ li > < li > Item 3 < ul > < li > Item 3.1 </ li > ...

The inset CSS property is a shorthand that corresponds to the top , right , bottom , and/or left properties. It has the same multi-value syntax of the margin shorthand. While part of the CSS Logical Properties specification, it does not define logical offsets. It defines physical offsets, regardless of the element's writing mode, directionality, and text orientation. /* <length> values */ inset : 10px ; /* value applied to all edges */ inset : 4px 8px ; /* top/bottom left/right */ inset : 5px 15px 10px ; /* top left/right bottom */ inset : 2.4em 3em 3em 3em ; /* top right bottom left */ /* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */ inset : 10% 5% 5% 5% ; /* Keyword value */ inset : auto ; /* Global values */ inset : inherit ; inset : initial ; inset : unset ; Syntax Values The inset property takes the same values as the left property. Formal definition Initial value auto Applies to positioned elem...

The initial-letter CSS property sets styling for dropped, raised, and sunken initial letters. /* Keyword values */ initial-letter : normal ; /* Numeric values */ initial-letter : 1.5 ; /* Initial letter occupies 1.5 lines */ initial-letter : 3.0 ; /* Initial letter occupies 3 lines */ initial-letter : 3.0 2 ; /* Initial letter occupies 3 lines and sinks 2 lines */ /* Global values */ initial-letter : inherit ; initial-letter : initial ; initial-letter : unset ; Syntax The keyword value normal , or a <number> optionally followed by an <integer> . Values normal No special initial-letter effect. Text behaves as normal. <number> Defines the size of the initial letter, in terms of how many lines it occupies. Negative values are not allowed. <integer> Defines the number of lines the initial letter should sink when the size of it is given. Values must be greater than zero. If omitted, it duplicates the size value...

The margin-block-start CSS property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. Syntax /* <length> values */ margin-block-start : 10px ; /* An absolute length */ margin-block-start : 1em ; /* relative to the text size */ margin-block-start : 5% ; /* relative to the nearest block container's width */ /* Keyword values */ margin-block-start : auto ; /* Global values */ margin-block-start : inherit ; margin-block-start : initial ; margin-block-start : unset ; It corresponds to the margin-top , margin-right , margin-bottom , or margin-left property depending on the values defined for writing-mode , direction , and text-orientation . It relates to margin-block-end , margin-inline-start , and margin-inline-end , which define the other margins of the element. Values The margin-block-start property takes the same values as the margin-l...

The initial CSS keyword applies the initial (or default) value of a property to an element. It can be applied to any CSS property. This includes the CSS shorthand all , with which initial can be used to restore all CSS properties to their initial state. On inherited properties, the initial value may be unexpected. You should consider using the inherit , unset , or revert keywords instead. Examples Using initial to reset color for an element HTML < p > < span > This text is red. </ span > < em > This text is in the initial color (typically black). </ em > < span > This is red again. </ span > </ p > CSS p { color : red ; } em { color : initial ; } Result Specifications Specification Status Comment CSS Cascading and Inheritance Level 4 The definition of 'initial' in that specification. Candidate Recommendation No changes from Level 3. CSS Cascading and Inheritance Level 3 The definition of ...

The :last-child CSS pseudo-class represents the last element among a group of sibling elements. /* Selects any <p> that is the last element among its siblings */ p:last-child { color : lime ; } Note : As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required. Syntax :last-child Examples Basic example HTML < div > < p > This text isn't selected. </ p > < p > This text is selected! </ p > </ div > < div > < p > This text isn't selected. </ p > < h2 > This text isn't selected: it's not a `p`. </ h2 > </ div > CSS p:last-child { color : lime ; background-color : black ; padding : 5px ; } Result Styling a list HTML < ul > < li > Item 1 </ li > < li > Item 2 </ li > < li > Item 3 < ul > < li > Item 3.1 </ li > < li...

The scale3d() CSS function defines a transformation that resizes an element in 3D space. Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales. Its result is a <transform-function> data type. This scaling transformation is characterized by a three-dimensional vector. Its coordinates define how much scaling is done in each direction. If all three coordinates are equal, the scaling is uniform ( isotropic ) and the aspect ratio of the element is preserved (this is a homothetic transformation). When a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. If it is negative, the result a point reflection in that dimension. A value of 1 has no effect. Syntax The scale3d() function is specified with three values, which represent the amount of scaling to be applied in each direction. scale3d ( sx , sy , sz ) Values sx Is a <number> representing the absciss...

The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements. /* Selects any <p> that is the last element of its type among its siblings */ p:last-of-type { color : lime ; } Note : As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required. Syntax :last-of-type Examples Styling the last paragraph HTML < h2 > Heading </ h2 > < p > Paragraph 1 </ p > < p > Paragraph 2 </ p > CSS p:last-of-type { color : red ; font-style : italic ; } Result Nested elements This example shows how nested elements can also be targeted. Note that the universal selector ( * ) is implied when no simple selector is written. HTML < article > < div > This `div` is first. </ div > < div > This < span > nested `span` is last </ span > ! </ div > < div > This < em > nested ...

The rotate CSS property allows you to specify rotation transforms individually and independently of the transform property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform property. Syntax /* Keyword values */ rotate : none ; /* Angle value */ rotate : 90deg ; rotate : 0.25turn ; rotate : 1.57rad ; /* x, y, or z axis name plus angle */ rotate : x 90deg ; rotate : y 0.25turn ; rotate : z 1.57rad ; /* Vector plus angle value */ rotate : 1 1 1 90deg ; Values angle value An <angle> specifying the angle to rotate the affected element through, around the Z axis. Equivalent to a rotate() (2D rotation) function. x, y, or z axis name plus angle value The name of the axis you want to rotate the affected element around ( "x" , " y ", or " z" ), plus an <angle> specifying the angle to rotate the element through. Equivalent to a rotateX() ...