DEV Community: Gajendra Dhir

Selectors in CSS

Gajendra Dhir — Fri, 13 Dec 2024 12:31:45 +0000

Introduction

Selector is the first part of any CSS rule. The selector identifies to which part or section of the HTML document the rule will be applied.

    selector {
        property: value;
        ....
    }

The rule is enclosed in { }. A rule allows us to specify on or more properties and their values that decides how it will render.

Simple Selectors

Select elements based on name, id, class

`name` of element

The name of the element is directly used as the selector.

    body {
        ...
    }
    div {
        ...
    }
    input {
        ...
    }

`id` of element

In HTML, some elements can be identified with the id attribute.

    <p id='idname'>This is a some text.</p>

In CSS, the selector for this will start with a hash (#) followed by the name of the id.

    #idname {
        ...
    }

`class` of element

In HTML, when you may define a class attribute.

    <div class='container'>...</div>

In CSS, the selector for the class starts with a period (.) followed by the name of the class.

    .container {
        ...
    }

Multiple class names can be marked in HTML by seperating them with a space.

    <div class='card card-info'>

When multiple classes are defined, then the styling rules will apply in the order they are listed. The latest value for a property will prevail if the property values are given in more than one class.

Attribute Selector

Attribute selector matches elements based on the value of some of its attribute.

[attr]
[attr=value]
[attr~=value]
[attr|=value]
[attr^=value]
[attr$=value]
[attr*=value]
[attr operator value i]
[attr operator value s]

. and # are special operators to identify the attributes id and class. [] allow to select any attribute.

Selector List - Comma (`,`) separated

    div, li, .card-info {
        ...
    }

If the same styling is to be applied to multiple selectors then use comma (,) to separate the selectors and then define the css rule.

Combinators

A combinator is a combination of two or more selectors used together. Combinators are used define the specificity of the selector.

Descendant Selector (space)

    div p {
        ...
    }

This will select all ps under all divs. ps in any child of the divs will also be included.

Child Selector (>)

    div > p {
        ...
    }

This will select all ps directly under all divs. ps nested inside any child of div will not be included.

Adjacent Sibling Selector (+)

    div + p {
        ...
    }

This will select ps that are immediately after divs - at the same level. No parent or child will be included.

General Sibling Selector (~)

    div ~ p {
        ...
    }

This will select ps that are anywhere after divs - at the same level. No parent or child will be included.

Nested Selector (with and without `&`)

preceding selector with &

    .parent {
        ...
        & :nested {
            ...
        }
    }

evaluates to...

    .parent {
        ... parent rules
    }

    .parent:nested {
        ...child rules
    }

all .parent having puesdo-class :nested

without &

When the selector is nested without &, a space is added to the resulting nested css-rule, i.e.

    .parent {
        ... parent rules
        :nested {
            ... child rules
        }
    }

evaluates to...

    .parent {
        ... parent rules
    }

    .parent *:nested {
        ...child rules
    }

all descendants of .parent having puesdo-class :nested

adding & after the selector

    .outer {
        ... outer rules
        .nested & {
            ...nested rules
        }
    }

evaluates to...

    .outer {
        ... outer rules
    }

    .nested .outer {
        ...nested rules
    }

Here outer rules will apply normally apply .outer selector, but when .outer is a descendant of the .nested selector then the nested rules will apply.

adding multiple & after the selector

    .parent {
        ... parent rules
        .nested & & & {
            ...nested rules
        }
    }

the three &s evaluate to...

    .parent {
        ... parent rules
    }

    .nested .parent .parent .parent {
        ...child rules
    }

Pseudo-classes

Pseudo-classes are selectors that are recognized in the browser without explicitly being defined in the web-page.

A pseudo-class can used by adding : before it.

  a:active          /* active links */
  div:hover         /* when mouse hovers over the <div> */
  div:first-child   /* the first child inside the <div> */

List of Pseudo-classes

:active
:any-link
:dir
:empty
:has(selector)
:hover
:is(selector)
:lang(language)
:link
:not(selector)
:root
:state(identifier)
:target
:visited
:where(selector)

for child

:first-child
:last-child
:nth-child(position)
:nth-last-child(position)
:only-child

for of-type

:first-of-type
:last-of-type
:nth-of-type(position)
:nth-last-of-type(position)
:only-of-type

for inputs

:checked
:disabled
:enabled
:focus
:focus-visible
:in-range
:inderminate
:invalid
:optional
:out-of-range
:read-only
:read-write
:required
:valid

CSS Pseudo Elements

Pseudo Elements do not have to be defined in the web-page, yet the browser recognizes these elements.

List of pseudo elements

::after
::before
::file-selector-button
::first-letter
::first-line
::grammar-error
::marker
::placeholder
::selection
::spelling-error
::target-text
::backdrop
::cue
::highlight
::part
::slotted
::view-transition
::view-transition-image-pair()
::view-transition-group()
::view-transition-new()
::view-transition-old()

I hope you find this useful.

Flex Box Layout in CSS

Gajendra Dhir — Tue, 12 Nov 2024 06:31:01 +0000

The FlexBox layout is initiated with the display: flex; property and you can control how the children of the element are laid-out inside the parent on the webpage.

The flexbox layout plays probably plays a very important role in planning a responsive web layout.

(CSS)
.parent {
    display: flex;
    ... other properties
}

For the display property, the flex value can be along with inline (display: inline flex or display: inline-flex) to define inline flex containers and with block (display: block flex or display: block-flex) to define block flex containers. flex used by itself defines a block level container

(HTML)
<div class='parent'>
    <div class='child1'>
        ...content of child 1
    </div>
    <div class='child2'>
        ...content of child 2
    </div>
    ....
</div>

Each item inside a flexbox is called flex item and the flexbox itself is referred to as the flex container.

The layout of flex items can be in either horizontal or vertical direction.

Main Axis and Cross Axis

The direction in the items are laid out is known as the main axis and the direction perpendicular to the main axis is known as the cross axis.

By default, row is the main axis, this can be changed by specifying the desired flex-direction.

The size of a flex item along the main axis is identified as the main size, where as its size along the cross axis is the cross size

Properties for the flexbox

Flexbox has properties some applicable at the parent and while others at the child levels that can be used to create innovative layouts.

Parent Level Properties	Child Level Properties
`flex-direction`	`flex-grow`
`flex-wrap`	`flex-shrink`
`justify-content`	`flex-basis`
`justify-items`	`justify-self`
`align-content`	`align-self`
`align-items`	`order`
`column-gap`
`row-gap`
Shorthands
`flex-flow`	`flex`
`place-content`	`place-self`
`place-items`
`gap`

At parent (or container) level...

Here are the properties that must be specified for the container element to control the flow of flex items in it.

flex-direction

determines the direction in which the successive items is to placed in the flex container.

When the direction is row or row-reverse the main axis is in the horizontal direction.

Similarly, when the direction is column or column-reverse the main axis is in the vertical direction.

Note

When flex-direction: row, then default width of container is 100%, and

When flex-direction: column, the default height is the height required to render the content.
flex-wrap

determines whether are items will be laid out on one line or may flow onto multiple lines.
flex-flow

This is the shorthand property for...
- flex-direction
- flex-wrap
justify-content

justifies the overall content along the main axis.
justify-items

sets the justification of the individual elements along the main axis within the dimensions designated to it after justify-content is processed.

This setting applies to each of the elements in the flexbox, unless a justify-self is specified at the child level.
align-content

Aligns the overall content along the cross axis.
align-items

Aligns the individual elements along the cross axis within the dimensions designated to it after align-content is processed.

This alignment is applied to each of element in the flexbox, unless a align-self is specified at the child level.
place-content

This is a shorthand property for
- align-content, and
- justify-content.
If one value is provided, that value applied to both align-content and justify-content.

If two values are provided, the first will be for align-content and the second will be for justify-content.
place-items

This is a shorthand property for
- align-items and
- justify-items.
If one value is provided, that value applied to both align-items and justify-items.

If two values are provided, the first will be for align-items and the second will be for justify-items.
column-gap

Determines the gap between columns in the flex box. Also works for grid and multi-column container.
row-gap

Determines the gap between rows in the flex and grid containers
gap

This is the shorthand property for...
- column-gap
- row-gap

At child level...

Below are the properties that may be specified to control the rendering of the flex items.

flex

This is shorthand property for...
- flex-grow
- flex-shrink
- flex-basis
flex-grow

This determines how the positive free space in the flex container is assigned to the main-size of the item i.e. it specifies the grow factor for an item.
flex-shrink

This determines how the negative free space in the flex container is assigned to the main-size of the item i.e. it specifies the shrink factor for an item.
flex-basis

This specifies the initial main size for the flex item. The final computed main size will depend when the flex-grow and flex-shrink values are applied to this.
justify-self

This property overrides the justify-items property defined for the flex container.
align-self

This property overrides the align-items property defined for the flex container.
place-self

This property overrides the place-items property values provided for the flex container.
order

The order property defines the sequence in which each flex item is rendered.

Coordinate System in CSS

Gajendra Dhir — Mon, 11 Nov 2024 09:36:20 +0000

Two dimensional (x, y) coordinates or three dimensional (x, y, z) coordinates are used to indicate the location of a pixel in a graphics context.

Dimensions and Origin

x-coordinate

indicates the location on the horizontal axis

y-coordinate

indicates the location on the vertical axis

z-coordinate

indicates the position along views - to - screen axis.

z-axis coordinates are handled differently for showing a graphic shape in 3d or for rendering layers of elements one on top of the other in the 2d mode.

z-index property is used to decide which element will be shown above or below other overlapping elements. The element with the lowest z-index is recognized as the topmost layer and will be shown above all others.

Origin

The position of each point is defined relative to a fixed point in the context. This fixed point is called Origin.

In a browser, the default point of origin is the top-left corner of the context. The point below this origin is moves in the positive y direction and to the left of the origin moves in the positive x direction.

Graphic Contexts

CSSOM (CSS Object Model) maintains coordinates on 4 graphics contexts...

When a browser renders a page, the coordinates of each pixel is maintains in 4 contexts.

Offset for Elements

The position of the pixel within the element is called its Offset. ie. if it is the point along the x and y axes when we consider the top-left point of the element as the origin.

Client for Viewport

The part of the browser dedicated to displaying the webpage being being rendered is known as the Viewport. The location of a pixel with reference to the viewport is called its position on the Client.

The viewport is generally a part of the screen and displays a part of the webpage. If the page is bigger than the viewport, scrollbars are used to control which part of the page is visible in the viewport.

Screen

Screen is the entire physical device on which the document is presented. A single point on the Screen will correspond to the different points on the Viewport if the Viewport is moved.

Coordinates in Event Handling

MouseClick Event

MouseClick.OffsetX and MouseClick.OffsetY
MouseClick.ClientX and MouseClick.ClientY
MouseClick.PageX and MouseClick.PageY
MouseClick.ScreenX and MouseClick.ScreenY

These coordinates are generally used in Javascript to find-out where the user clicked the mouse while browsing and respond accordingly.

Touch Event

Touch.ClientX and Touch.ClientY
Touch.PageX and Touch.PageY
Touch.ScreenX and Touch.ScreenY

These coordinates are generally used in Javascript to find-out where the user touched on the screen.

Transform the coordinates

CSS provides properties that allow you to alter the position of the axis for coordinates of elements i.e. the coordinates of certain elements can be transformed.

The transform operations supported are...

transform-origin
rotate
scale
translate
skew
perspective

Some of the transformations work in 3d mode also. The transform property is used to deliver some of the most render some of the popular animation sequences in CSS.

Size of box in CSS (box-sizing)

Gajendra Dhir — Mon, 14 Oct 2024 12:24:22 +0000

The layout of elements is done by marking the position and dimension of each element as rectangular boxes in the document, based on the CSS Box Model.

The size and space required for each rectangular box on the document is a very important consideration in any UI design project.

`box-sizing: content-box`

Consider the following CSS rule...

    .box {
        box-sizing: content-box;
        width: 150px;
        height: 100px;
        margin: 10px;
        padding: 5px;
        border: 2px solid red;
    }

Size of the content-area for .box will be...

property	value
width	`150px`
height	`100px`

and, the space required by it on the document will be...

property	computation	value
width	`10 + 2 + 5 + 150 + 5 + 2 + 10`	184px
height	`10 + 2 + 5 + 100 + 5 + 2 + 10`	134px

To compute of space for margins, one must take into consideration the impact of margin-collapse.

`box-sizing: border-box`

Now, check this rule...

    .box {
        box-sizing: border-box;
        width: 150px;
        height: 100px;
        margin: 10px;
        padding: 5px;
        border: 2px solid red;
    }

In this case, the size of the content-area for .box will be...

property	computation	value
width	`150 - 5 - 2 - 5 - 2`	`136px`
height	`100 - 5 - 2 - 5 - 2`	`86px`

and, the space required by the element on the document will be...

property	computation	value
width	`10 + 150 + 10`	`170px`
height	`10 + 100 + 10`	`120px`

How does this work?

An understanding of the Box Model goes a long way in achieving the desired UI/UX.

Areas and Boxes

The rectangular box for every element has 4 areas or parts...

content-area

This is the area where the actual content - text, images or other HTML elements - are displayed.

padding-area

specified using padding or the padding-* sub-properties.

This is the area that surrounds the content-area and extends to the outer edge of the padding on each side.

border-area

specified using border or the border-* sub-properties.

This is the area surrounding the padding-area and extending up to the outer edge of the border on each side.

margin-area

specified as margin or using the margin-* sub-properties.

The area surrounding the border-area and extending up to the edge of the margin specified on each side.

The Box

Based on these areas and their different combinations, the browser uses different boxes when it computes the layout for a each element in the document...

content-box - it is the innermost box (or the content-area) of the element that renders the actual content - text, images and other elements.
padding-box - from the outer edge of the content box and up to the outer edge of the padding-area. If padding width and height is 0, then padding-box will be same as content-box.
border-box - starts from the outer area of the padding-box up to the outer edge of the border-area.
margin-box - the area of the element beyond the border-box and up to the outer edge of the margin-area.
visual-box - the box that is seen on the web page, this includes the content, padding and border. The margin is not a part of this.
layout-box - the space occupied by the element on the document - including its content, padding, border and margin. This space is used for layout and position on the document.
paint-box - this is the paintable area of the element. This area is the excludes the margin-area.
coord-box - this is the location and size of the element within its parent. These coordinates exclude the margin area (of the parent).

Sub-Properties

Using sub-properties, different values can be set for the top, left, bottom and right sides of padding, border and margin.

padding
- padding-left
- padding-right
- padding-top
- padding-bottom
- padding-block
- padding-block-start
- padding-block-end
- padding-inline
- padding-inline-start
- padding-inline-end
border
- border-left-width
- border-right-width
- border-top-width
- border-bottom-width
- border-block-width
- border-block-start-width
- border-block-end-width
- border-inline-width
- border-inline-start-width
- border-inline-end-width

border property has sub-properties for setting styles and color of each side.

margin
- margin-left
- margin-right
- margin-top
- margin-bottom
- margin-block
- margin-block-start
- margin-block-end
- margin-inline
- margin-inline-start
- margin-inline-end

`box-sizing`

CSS allows for two box-sizing options.

`content-box`

    .box {
        box-sizing: content-box;
        ...
    }

In a content-box, the width, min-width, max-width, height, min-height, max-height properties denote the dimension of the content-area. The padding, border etc add on to this to compute the <layout-box>.

`border-box`

    .box {
        box-sizing: border-box;
        ...
    }

In a border-box, the width, min-width, max-width, height, min-height, max-height properties set the dimensions of the <paint-box>, i.e. the content, padding and border areas are include within the width and height.

Animation in CSS

Gajendra Dhir — Fri, 11 Oct 2024 05:42:37 +0000

Animation in CSS has two parts - @keyframes and animation-*.

The `@keyframes` at-rule

The first part requires us to define the @keyframes.

This lets us specify the CSS-style that should apply at the different points in the duration of the animation.

The different points of time are specified in % values. Any number of offsets positions between 0 and 100 percent can be specified.

from can be used for offset 0%, and to is the same as the offset 100%.

    @keyframes anim-name {
        from { css-style-a }
        to { css-style-b }
    }

Below the css style has been specified for three time-points for one property - background-color.

    @keyframes colorit {
        0% { background-color: red; }
        50% { background-color: yellow; }
        100% { background-color: silver; }
    }

It may as well specify multiple properties.

    @keyframes colorit {
        0% { 
            background-color: red; 
            left: 0px; 
            top: 50px;
        }
        50% { 
            background-color: yellow; 
            left: 50px; 
            top: 75px;
        }
        100% { 
            background-color: silver; 
            left: 200px;
            top: 25px;
        }
    }

`animation-*` properties

Here is a list of properties that can be used to control how the transition of styles will be done to give the UI/UX of an animation.

animation-composition
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-range
animation-range-end
animation-range-start
animation-timeline
animation-timing-function

Each of this sub-property sets some aspect of the animation.

Below is the definition for @keyframes named colorit to be run for 3 seconds.

    div.box {
        ...
        animation-name: colorit;
        animation-duration: 3s;
        ...
    }

All the sub-properties can be specified in a single line using the animation shorthand.

animation: 3s colorit;

The browser does the math required and renders the appropriate animation.

Similarly, the animation properties allow the control of delay, timing, number of times (iteration), direction etc. for the designer to achieve his vision.

Variables in CSS

Gajendra Dhir — Wed, 02 Oct 2024 10:40:28 +0000

Introduction

CSS variables allow us to store a value to some identifier and then use that identifier wherever and whenever that value is needed.

In CSS a variable is an identifier preceeded with two dashes (--). To use variables, just..

Define @property
Assign values
Use the value var() function
- Fallback values
- Invalid values

Personally, I feel variables are the coolest addition to the CSS stable.

It has made the task of maintaining and fine-tuning my UI/UX so much easier. I do not have to find and replace every usage of a color value.

Use @property

The use of this at-rule is optional. The code works fine even if @property definition is not provided.

    @property --my-forecolor {
        syntax: <color>;
        inherits: false;
        initial-value: darkblue;
    }

The @property lets you define the type of the variable, a default value and it allows you to control its inheritance.

Assign values

Specify two dashes (--) followed by a name for the custom property and assign a valid CSS value after a colon (:).

:root {
    --my-forecolor: red;
}

.classname {
    --my-forecolor: blue;
}

A custom property assigned without the @property at-rule is always inherited.

Scope of the Variable

Global

A variable declared in the :root selector has the global scope and can be used throughout the entire document.

Local

It has a local scope if the variable is declared inside the selector where you want to use it.

In the code above globally the value of --my-forecolor is red, but in the elements having class as .classname its value will be blue.

var() Function

The value in the custom variable can be referenced with the var() function.

.heading {
    color: var(--my-forecolor);
}

Fallback values

You can add a fallback value to the var() function.

The second argument in the var() function is the optional fallback value, which is used when the reference value of the variable is invalid.

    var(--my-own-color, blue)

The fallback value here is blue.

The second argument could also reference a variable, like this...

    var(--my-own-color, var(--my-forecolor))

and, the second variable could also have a fallback...

    var(--my-own-color, var(--my-forecolor, maroon))

Invalid Custom Properties

Without variables - When the value assigned to any property is invalid, that declaration is ignored and style is computed as if that declaration did not exist.

   div {
       color: blue;
       background: lightcyan;
   }

   div {
       color: 30deg;
   }

   <div>This line is printed</div>

Here the output would have the color blue.

With variables -

If the value of the variable being referenced is invalid for that property then the inital or inherited value is used.

    :root {
        --cust-var: 50px;
    }

    div {
        color: blue;
        background: lightpink;
    }

    div {
        color: var(--cust-var);
    }

   <div>This line is printed</div>

50px may be a valid value for length but for color it is invalid, so here the output would be printed in black - the browser's initial value.

If @property at-rule is added, and the value of the variable is invalid, then the initial-value of the property will be used.

    @property --cust-var {
       syntax: '<color>';
       inherits: false;
       initial-value: red;
    }

    :root {
        --cust-var: 50px;
    }

    div {
        color: blue;
        background: lightyellow;
    }

    div {
        color: var(--cust-var);
    }

Here the output would be printed in red - the initial value defined the property at-rule.

Units for Values in CSS

Gajendra Dhir — Mon, 30 Sep 2024 05:19:06 +0000

Units in CSS

Values are regularly used in CSS. These are specified sometimes in absolute units and at other times in relative units.

CSS provides units for length, angle, frequency and within each category it supports conversion between the different units of measurement.

It is good to have an understanding of the various units or measurement that CSS supports. This allows web developers and designers to work within their comfortable zones.

Below is a list of units supported in CSS.

Absolute Units

Length

cm, mm, Q, in, pt, pc, px

Unit	Name	Equivalent to
cm	Centimeters	1cm = 37.8px = 1/2.54 of 1in
mm	Millimeters	1mm = 1/10 of 1cm
Q	Quarter-millimeters	1Q = 1/40 of 1cm
in	Inches	1in = 2.54cm = 96px
pc	Picas	1pc = 1/6 of 1in
pt	Points	1pt = 1/72 of 1in
px	Pixels	1px = 1/96 of 1in

Angles

deg, grad, rad, turn

Unit	Name	Equivalent to
deg	Degree	360deg = 1 full circle
grad	Gradian	400grad = 1 full circle
rad	Radian	6.2832rad = 1 full circle (π approx = 3.1416)
turn	Turn	1 turn = 1 full cirle

Time

s, ms

unit	name	equivalent to
s	second	1s = 1000ms
ms	millisecond	1ms = 1/1000 of 1s

Frequency Units

Hz, kHz

unit	name	equivalent to
Hz	Hertz	1Hz = 1/1000 of 1 kHz
kHz	Kilo Hertz	1KHz = 1000Hz

Resolution Units

dpi, dpcm, dppx

Relative Units

As the name suggests, these values provided with these units are relative to some other value. It could be related to some parent element or the viewport.

Font Related

em, ex, ch, rem

Viewport Related

%, vw, vh, vmin, vmax

Container Query Related

cqw, cqh, cqi, cqb, cqmin, cqmax

Note

It is common practice to define an absolute value to the container element and then use relative values for all descendant elements.

Container Queries in CSS

Gajendra Dhir — Sat, 28 Sep 2024 07:20:46 +0000

First a container must be registered, and it can be queried.

Register a Container

Use a selector to register a container.

.parent {
    container-name: myname;
    container-type: inline-size;
    ... other code
}

or, use the shorthand option

.parent {
    container: myname / inline-size;
    ... other code
}

At the time of registration, two details - type and name - have to specified.

Container Type

container-type: ...

size
inline-size
normal

Container Name

container-name: <nameofcontainer>;

<nameofcontainer> identifies the container especially useful if you may a scenario of multiple containers.

Query a Container

The container query starts with the @container at-rule followed by the name of the container and the feature query.

div {
    font-size: 2em;
}

@container myname (width: > 30ch)
{
    div {
        font-size: 3em;
    }
}

container query to set font-size for the div inside the myname container to 3em if the feature width is greater than 30ch.

Features to Query

size-query...

width
height
inline-size
block-size
aspect-ratio
orientation

style-query...

style(property: value)

property to be checked for value.

for eg

@container contname style('background-color: blue') {
    ... 
    styles 
    ...
}

The container query to apply styles if the background-color of the container contname is blue

Compound Queries

and, or and not can be used to create compound queries

for eg

    @container myname (width>30ch) and (height>100px) {
        ...
    }

    @container myname not (color: blue) {
        ...
    }

Nested Container Queries

Container queries can be nested within other container queries.

for eg

    @container myname (width>30ch) {
        ...
        @container myname (background-color: blue) {
            ...
        }
        @container myname (background-color: red) {
            ...
        }
    }

CSS: List of Properties for Text

Gajendra Dhir — Thu, 26 Sep 2024 10:15:48 +0000

This is cheat-sheet list of properties that decide how text is displayed. fonts, styles, alignment, spacing etc.

Fonts

font-family
font-size
font-size-adust
font-style
font-variant
font-variant-caps
font-weight
@font-face (at-rule)

Text

text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-indent
text-justify
text-orientation
text-overflow
text-shadow
text-transform
text-underline-offset
text-underline-position

Others

hanging-punctuation
hyphenate-limit-chars
hyphens
letter-spacing
line-height
orphans
overflow-wrap
tab-size
white-space
white-space-collapse
widows
word-break
word-spacing
word-wrap
writing-mode

DEV Community: Gajendra Dhir

Selectors in CSS

Introduction

Simple Selectors

name of element

id of element

class of element

Attribute Selector

Selector List - Comma (,) separated

Combinators

Descendant Selector (space)

Child Selector (>)

Adjacent Sibling Selector (+)

General Sibling Selector (~)

Nested Selector (with and without &)

preceding selector with &

without &

adding & after the selector

adding multiple & after the selector

Pseudo-classes

List of Pseudo-classes

CSS Pseudo Elements

List of pseudo elements

Flex Box Layout in CSS

Main Axis and Cross Axis

Properties for the flexbox

At parent (or container) level...

Note

At child level...

Coordinate System in CSS

Dimensions and Origin

x-coordinate

y-coordinate

z-coordinate

Origin

Graphic Contexts

Offset for Elements

Client for Viewport

Page

Screen

Coordinates in Event Handling

MouseClick Event

Touch Event

Transform the coordinates

Size of box in CSS (box-sizing)

box-sizing: content-box

box-sizing: border-box

How does this work?

Areas and Boxes

content-area

padding-area

border-area

margin-area

The Box

Sub-Properties

box-sizing

content-box

border-box

Animation in CSS

The @keyframes at-rule

animation-* properties

Variables in CSS

Introduction

Use @property

Assign values

Scope of the Variable

Global

Local

var() Function

Fallback values

Invalid Custom Properties

Units for Values in CSS

Units in CSS

Absolute Units

Length

Angles

Time

Frequency Units

Resolution Units

Relative Units

`name` of element

`id` of element

`class` of element

Selector List - Comma (`,`) separated

Nested Selector (with and without `&`)

`box-sizing: content-box`

`box-sizing: border-box`

`box-sizing`

`content-box`

`border-box`

The `@keyframes` at-rule

`animation-*` properties