CSS & SCSS

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

• h1 is a selector in CSS (it points to the HTML element you want to style: <h1>)
• color is a property, and blue is the property value

Understand ‘+’, ‘>’ and ‘~’ symbols in CSS Selector

Sign: It will target elements which are DIRECT children of a particular element.

div#container > p {
  border: 1px solid black;
}

It will target all P element which are direct children of container div, not children of child div.

:has(), :parent selector

a:has(img) { background: none; }

a img:parent { background: none; }

Div Popup example filter: blur(4px);