M2- Different types of selectors (CSS)

Question 1

What are CSS selectors?

Answer 1

CSS selectors are patterns used in CSS to select the HTML elements you want to style. Selectors help apply styles to specific elements, groups of elements, or elements with certain attributes.

Question 2

What is an Element Selector and how do you use it?

Answer 2

An Element Selector targets all HTML elements of a specific type. You use it by writing the name of the element you want to style, followed by curly braces containing the CSS properties and values.

**Syntax:** element { property: value; }

Question 3

What is an ID Selector and how do you use it?

Answer 3

An ID Selector targets a specific element with a unique ID attribute. ID selectors are prefixed with a # symbol.
Syntax: #id { property: value; }

Question 4

What is a Class Selector and how do you use it?

Answer 4

Class Selector targets elements based on their class attribute. Unlike IDs, classes can be used on multiple elements.

Syntax: .class { property: value; }

Question 5

What is a Universal Selector and how do you use it?

Answer 5

A Universal Selector targets all elements on the page. It is used to apply global styles.

Syntax: * { property: value; }

Question 6

What is an Attribute Selector and how do you use it?

Answer 6

An Attribute Selector targets elements based on the presence or value of a specific attribute.

Syntax: element[attribute], element[attribute="value"]

Question 7

What is a Descendant Selector and how do you use it?

Answer 7

A Descendant Selector targets elements that are descendants of another element, regardless of their position in the hierarchy.

Syntax: ancestor descendant { property: value; }

Question 8

What is a Child Selector and how do you use it?

Answer 8

A Child Selector targets elements that are direct children of another element, meaning they are nested directly within their parent.

Syntax: parent > child { property: value; }

Question 9

What is a Pseudo-class Selector and how do you use it?

Answer 9

A Pseudo-class Selector targets elements in a specific state, such as when they are hovered over, focused, or active.

Syntax: selector:pseudo-class { property: value; }