CSS : Selectors - id , Selector - Class , Selector - attribute , Selectors - Attribute & Value

 Selectors - id

In CSS, an ID selector is used to style a specific HTML element with a unique ID attribute. The ID selector begins with a hash symbol (#) followed by the ID name, like this:

#my-element { /* CSS properties here */ }

For example, if you have an HTML element with the ID "my-element":

<div id="my-element">This is my element.</div>

You can style it using the ID selector in CSS:

#my-element { color: red; font-size: 20px; }

This will make the text inside the "my-element" div red and set the font size to 20 pixels.

IDs should be unique within the HTML document, so you can only apply an ID selector to one element.

Selector - Class

In CSS, classes are used to define a group of elements that share a common set of styles. The class selector is denoted by a period (.) followed by the class name.

To apply a style to an element using a class selector, we first define the class in CSS and then apply it to the element in HTML using the class attribute.

Here's an example:

CSS code:

.my-class { color: red; }

HTML code:

<p class="my-class">This text is red.</p>

In this example, we defined a class called "my-class" with a style that sets the color to red. We then applied this class to a paragraph element using the class attribute.

Note that multiple elements can have the same class, and one element can have multiple classes by separating them with a space in the class attribute:

<p class="my-class another-class">This text is red and has another class.</p>

This element has both the "my-class" and "another-class" classes applied to it, and will inherit styles from both class selectors in the CSS.

Selector - attribute

In CSS, the attribute selector allows you to target elements based on their attributes and attribute values. Attribute selectors are written using square brackets [].

Here are some examples:

• [href] targets all elements that have an href attribute.
• [href="#"] targets all elements that have an href attribute with a value of #.
• [class="my-class"] targets all elements that have a class attribute with a value of my-class.
• [type="checkbox"] targets all input elements that have a type attribute with a value of checkbox.

You can also use the attribute selector to target elements with specific attribute patterns. Here are some examples:

• [href^="https://"] targets all elements that have an href attribute starting with https://.
• [href$=".pdf"] targets all elements that have an href attribute ending with .pdf.
• [href*="example"] targets all elements that have an href attribute containing the word example.

The attribute selector can be combined with other selectors to make more specific rules. For example, you can combine the attribute selector with the class selector to target elements with a specific class and attribute:

a.my-class[href^="https://"] { color: blue; }

This rule targets all a elements with a class of my-class and an href attribute starting with https://, and sets their color to blue.

Selectors - Attribute & Value

Attribute and Value selectors are used to select elements based on their attributes and their attribute values. They are very useful when you want to select elements that have a certain attribute or attribute value.

The syntax for an attribute selector is as follows:

[attribute]

This will select all elements that have the specified attribute, regardless of its value.

For example, the following selector will select all elements that have the "required" attribute:

[required]

The syntax for an attribute value selector is as follows:

[attribute=value]

This will select all elements that have the specified attribute and value.

For example, the following selector will select all input elements that have the "type" attribute with a value of "text":

input[type=text]

You can also use other comparison operators to select elements based on the value of their attributes. Here are a few examples:

input[type^=t] /* Selects all input elements with a type that starts with "t" */ input[type$=t] /* Selects all input elements with a type that ends with "t" */ input[type*=ex] /* Selects all input elements with a type that contains "ex" */

These selectors are very powerful and can be used to select elements based on a wide range of criteria.