A CSS selector is a pattern that is used to select elements
from an HTML document and apply styles to those elements.
Selectors can be based on an element's tag name, class, ID, attributes,
and other properties.
Here are some examples of CSS selectors:
1. Element Selector:
The element selector selects elements based on their tag name.
Example:
p { color: red; }
This selector applies the color red to all paragraphs in an HTML document.
2. ID Selector:
The ID selector selects elements based on their unique ID.
Example:
#my-element {
font-weight: bold;
}
This selector applies bold font weight to an element with the ID "my-element".
3. Class Selector:
The class selector selects elements based on their class name.
Example:
.my-class {
text-align: center;
}
This selector applies center alignment to all elements with the class "my-class".
4. Attribute Selector:
The attribute selector selects elements based on their attribute values.
Example:
a[target="_blank"] {
color: blue;
}
This selector applies blue color to all anchor elements that have a target attribute with the value "_blank".
5. Pseudo-Class Selector:
The pseudo-class selector selects elements based on a state or condition.
Example:
a:hover {
text-decoration: underline;
}
This selector applies underlined text decoration to anchor elements when they are hovered over.
-------------------------------------------
6. Pseudo-Element Selector:
The pseudo-element selector selects a part of an element and styles it.
Example:
p::first-letter {
font-size: 2em;
}
This selector applies a font size of 2em to the first letter of all paragraphs.
7.Child Selector:
The child selector selects an element that is a direct child of another element.
Example:
ul > li {
list-style: none;
}
This selector applies no list style to all li elements that are direct children of ul elements.
8. Descendant Selector:
The descendant selector selects an element that is a descendant of another element.
Example:
div p {
font-style: italic;
}
This selector applies italic font style to all paragraphs that are descendants of div elements.
9.Universal Selector:
The universal selector selects all elements in an HTML document.
Example:
* {
margin: 0;
padding: 0;
}
This selector applies zero margin and padding to all elements in an HTML document.
These are some of the most commonly used CSS selectors. Selectors are essential in CSS because they allow you to target specific elements and apply styles to them, which helps you create a consistent and visually appealing design for your website or application.
Comments
Post a Comment