Science Knowings: CSS Course For Social Media

CSS Selectors

From Syntax to Selectors

Welcome back! In our previous session, we explored the basics of CSS syntax. Today, we're diving into CSS Selectors, the foundation for targeting and styling elements on your web pages.

What are CSS Selectors?

CSS Selectors are patterns used to match HTML elements based on their attributes, such as their tag name, ID, class, or position in the document tree.

Types of CSS Selectors

There are various types of CSS Selectors, each with its own purpose. Let's explore the most common ones:

Universal Selector

The universal selector (*) matches all elements on the page. It's rarely used except in global stylesheets.

Type Selector

The type selector targets elements based on their tag name. For example, p selects all paragraph elements.

ID Selector

The ID selector targets elements with a specific id attribute. IDs must be unique within a page.

Class Selector

The class selector targets elements with a specific class attribute. Classes can be applied to multiple elements.

Descendant Selector

The descendant selector targets elements that are descendants of a specific ancestor element. For example, ul li selects all list items (li) that are inside unordered lists (ul).

Child Selector

The child selector targets elements that are direct children of a specific parent element. For example, div > p selects all paragraphs (p) that are direct children of a div element.

Adjacent Sibling Selector

The adjacent sibling selector targets elements that are adjacent siblings of a specific element. For example, h1 + p selects all paragraphs (p) that are immediately after a heading (h1).

General Sibling Selector

The general sibling selector targets elements that are siblings of a specific element, regardless of their position. For example, h1 ~ p selects all paragraphs (p) that are siblings of a heading (h1).

Attribute Selector

The attribute selector targets elements based on their attributes. For example, [href] selects all elements with an href attribute.

Pseudo-Class Selector

Pseudo-class selectors target elements based on their state or behavior. For example, :hover selects elements when the mouse hovers over them.

Pseudo-Element Selector

Pseudo-element selectors target specific parts of an element. For example, ::before targets the content before an element.

Combining Selectors

You can combine multiple selectors to create complex targeting rules. For example, div#container p.intro selects all paragraphs (p) with the class intro that are inside a div with the ID container.

Beyond the Basics

Congratulations! You've now mastered the fundamentals of CSS Selectors. In the next session, we'll dive into CSS Colors, exploring their importance in web design. Follow us for more!