Category: Basic

Adjacent Sibling Selectors in CSS CSS adjacent sibling selector or next sibling selector selects an element that is immediately after another element. It is used to select only those elements which immediately follow the first selector. Both elements should share the same parent. Syntax The syntax for CSS adjacent sibling selectors is as follows: selector1 + selector2{/*…

General Sibling Selectors in CSS CSS general sibling selector ( “~” ) selects all the elements that are siblings of a specified element sharing the same parent. It will select all matching siblings, not just the one immediately following. A tilde ( “~” ) symbol is used to denote the general sibling. Syntax The syntax for CSS…

Descendant Selectors in CSS CSS descendant selector styles all the tags that are children of a particular specified tag. A single space between the parent element and child element is used to mention a descendant. Syntax The syntax for CSS descendant selectors is as follows: selector_1 selector_2{/* property: value; */color: #04af2f } Descendant Selectors Example…

Element Selectors in CSS CSS element selectors are used to target and style specific HTML elements. These selectors are defined by simply using the element’s name in the stylesheet. Syntax The syntax for CSS element selectors is as follows: element_name{/*property: value;*/color: red;} Using Element Selectors Setting Background Color To set the background color and text color of all <p> elements, use the…

Child Selectors in CSS CSS child selector selects all the direct children of a particular element. This is denoted by ‘>’ (Greater than) symbol. It will not select elements that are further nested inside the child elements. Syntax The syntax for CSS child selectors is as follows: selector > child-selector{/* property: value; */color: #04af2f }…

Class Selectors in CSS CSS class selectors are used to select elements with a specific class attribute. The class selector is defined using a period (.) followed by the class name. Syntax The syntax for CSS class selectors is as follows: .classname{/* property: value; */background-color: #04af2f;} Basic Class Selector To apply a background-color and text color to elements with a specific class,…

Group Selectors in CSS CSS group selector applies the same style to multiple elements at a time. The names of elements can be separated by commas. Group selector keeps CSS concise and avoids redundancy. Syntax The syntax for the CSS group selector is as follows: #selector_1, .selector_2, selector_3{/* property: value; */color: #04af2f } CSS Group Selectors Example…

ID Selectors in CSS CSS ID selector selects a single element with a particular value for the id attribute. An id in CSS is denoted by the “#” (hash) symbol. The same class can be applied to multiple elements, but an id is unique for an element. Syntax The syntax for the CSS id selector…

Universal Selectors in CSS CSS universal selector is a special selector that selects all the elements in an HTML document. It is denoted by an asterisk mark (*). Universal selector is used to set a similar style for the entire document. Syntax The syntax for the CSS universal selector is as follows: *{margin: 0;padding: 0;} Using…

CSS Cascading Cascading in CSS refers to a process where a browser determines which rule to apply on any element when various conflicting rules exist. The cascade follows a structured order to specify which style rule will take precedence over other style rules. Key Factors of CSS Cascading The key factors for deciding which CSS rule will…