course content

Course Content

Introduction to CSS Part I

Other SelectorsOther Selectors

Element selector

This selector is used to select and style all elements of a particular type on the page. It is identified by the element type (e.g., p, div, h1, etc.).

This selector will select and style all p elements on the page, giving them a blue color.

html

index.html

css

index.css

js

index.js

Descendant selector

This selector is used to select and style elements that are descendants of a particular element. The ancestor element, a space, and the descendant element identify it.

This selector will select and style all p elements descendants of a div element, giving them a font size of 12px.

html

index.html

css

index.css

js

index.js

Child selector

This selector is used to select and style elements that are direct children of a particular element. It is identified by the parent element, followed by a > symbol, followed by the child element.

This selector will select and style all p elements that are direct children of a div element, giving them an italic font style.

html

index.html

css

index.css

js

index.js

Adjacent sibling selector

This selector is used to select and style elements that are siblings of a particular element and come immediately after it. It is identified by the first element, followed by a + symbol, followed by the second element.

html

index.html

css

index.css

js

index.js

General sibling selector

This selector is used to select and style elements that are siblings of a particular element and come after it. It is identified by the first element, followed by a ~ symbol, followed by the second element. For example:

This selector will select and style all p elements that are siblings of a div element and come after it, giving them a red color.

html

index.html

css

index.css

js

index.js

Attribute selector

This selector selects and styles elements based on their attribute values. It is identified by the element type, followed by an opening square bracket [, followed by the attribute name and value, and a closing square bracket ].

This selector will select and style all elements with an href attribute that starts with 'https', giving them an orange color.

html

index.html

css

index.css

js

index.js

Section 2.

Chapter 3