Hello, my dear reader, In today's article, I will try to tell you about CSS selectors. You know that we need HTML, CSS, and Javascript knowledge to make a website from scratch. Since the styles, we will give to the web page are visually important, it is obvious how important the CSS selectors we will apply are. Application of wrong selectors will cause the styles we give to be not recognized by the web page and not reflected in the image.

What are CSS Selectors? How Do They Do It?

CSS Selectors are patterns used to select the elements from an HTML document to be styled by CSS. They can select elements by tag name, class, id, attribute, and more. For example, the selector "p" would select all

elements on a page, while the selector ".example" would select all elements with the class ".example", and the selector "#my-id" would select the element with the id "#my-id". These selectors can also be combined to select elements that meet multiple conditions, such as "p.example #my-id" which would select a element with the class "example" and id "my-id".

The CSS Element Selector

The CSS Element Selector, also known as a tag selector, selects elements by their HTML tag name. For example, the selector "p" would select all elements on a page, and any styles applied to that selector would be applied to all elements. The syntax for an element selector is the element's tag name, without any brackets or angle brackets, like this:
p { styles here }

You can use multiple CSS element selector to select multiple element and apply the same styles to all.
p, h1, h2 { /* styles here */ }

This will select all p, h1 and h2 elements, and apply the same styles to all of them

The CSS ID(#) Selector

The CSS Id Selector selects elements by their unique id attribute. The syntax for an id selector is a "#" symbol followed by the id value, like this:
#my-id { /* styles here */ }

This selector will select the element with the id "my-id" and apply the styles to that specific element. It's important to note that id values must be unique within a single HTML document. This means that an id can only be used once on a page. If you have multiple elements with the same id, the styles will only be applied to the first element. Also you can use CSS id selector along with element selector.
p#my-id { /* styles here */ }

This selector will select element with the id "my-id" and apply the styles to that specific element. It is recommended to use id selectors only when there is a single unique element on the page that must be selected, as they have higher specificity than class selectors and can override styles applied to a class

The CSS Class Selector

The CSS Class Selector selects elements by their class attribute. The syntax for a class selector is a "." symbol followed by the class value, like this:
.my-class { /* styles here */ }

This selector will select all elements with the class "my-class" and apply the styles to those elements. Multiple elements can have the same class, this is why class selectors are useful when you want to apply styles to multiple elements that share the same design characteristics.
<p class="my-class">This is a paragraph</p>
<div class="my-class">This is a div </div>

With this css class selector ".my-class" will select both <p> and <div> elements and apply the same styles to both of them. It's also possible to use class selectors along with element selectors, like this:
p.my-class { /* styles here */ }

This selector will select only <p> elements with the class "my-class" and apply the styles to those specific elements. The CSS class selector has less specificity than an id selector, so if an id and class selector both target the same element, the styles from the id selector will take precedence.

The CSS Universal Selector

The CSS Universal Selector, represented by an asterisk (), selects all elements on a page. This selector is useful when you want to apply styles to all elements, regardless of their tag name, class, or id. The syntax for the universal selector is an asterisk (), like this:
* { /* styles here */ }
This selector will select all elements on the page and apply the styles to them. It can also be used along with other selectors to select all elements within a specific element or class. For example,
#my-id * { /* styles here */ }
This selector will select all elements within the element with the id "my-id" and apply the styles to them.
.my-class * { /* styles here */ }
This selector will select all elements within the elements with the class "my-class" and apply the styles to them. It's important to note that the universal selector has the lowest specificity among all selectors, so any styles applied using this selector can be overridden by more specific selectors.

CSS Combinators

There are four different combinators in CSS:

• Descendant selector (space)
• Child selector (>)
• Adjacent sibling selector (+)
• General sibling selector (~)

Descendant Selector

The CSS Descendant Selector, also known as a "contextual selector," selects elements that are descendants (i.e., children, grandchildren, etc.) of a specific ancestor element. The syntax for a descendant selector is a combination of an ancestor element selector and a descendant element selector separated by a space, like this:
div p { /* styles here */ }

This selector will select all <p> elements that are descendants of <div> elements and apply the styles to them. You can also chain multiple descendant selectors together to select elements that are nested several levels deep.
div p span { /* styles here */ }
This selector will select all <span> elements that are descendants of <p> elements, which in turn are descendants of <div> elements. It's important to note that descendant selectors are more specific than element selectors, but less specific than class selectors or id selectors.

Child Selector

The CSS Child Selector, also known as a "direct descendant selector," selects elements that are direct children of a specific ancestor element. The syntax for a child selector is a combination of an ancestor element selector and a child element selector separated by a ">" symbol, like this:
div > p { /* styles here */ }

Adjacent Sibling Selector

The CSS Adjacent Sibling Selector selects elements that are immediately preceded by a specific element. The syntax for an adjacent sibling selector is a combination of the preceding element selector and the targeted element selector separated by a "+" symbol, like this:
p + span { /* styles here */ }
This selector will select all <span> elements that are immediately preceded by a <p> element and apply the styles to them.
<p>This is a paragraph</p>
<span>This is a span </span>
In this example the <span> element will be selected and the styles will be applied. It's important to note that the preceding element must be on the same level of the DOM tree as the targeted element, not nested inside another element, and the two elements must be siblings. Adjacent sibling selectors are useful when you want to apply styles to an element based on the presence or absence of a specific preceding element. It's also important to note that adjacent sibling selectors are less specific than class selectors or id selectors, so styles applied using this selector can be overridden by more specific selectors.

General Sibling Selector

The CSS General Sibling Selector selects elements that have the same parent as a specific element and come after it in the document flow. The syntax for a general sibling selector is a combination of the preceding element selector and the targeted element selector separated by a "~" symbol, like this:

p ~ span { /* styles here */ }

CSS [attribute] Selector

The CSS [attribute] Selector selects elements based on the presence or value of a specific attribute. The syntax for an attribute selector is the attribute name within square brackets, like this:
input[type="text"] { /* styles here */ } This selector will select all <input> elements with the attribute "type" set to "text" and apply the styles to them.
<input type="text" placeholder="Enter your name">
In this example, the <input> element will be selected and the styles will be applied to it.

See you in another post. Goodbye 👋