Tuesday, September 10, 2019
CSS Selectors:
CSS selectors are patterns that are used to select and style HTML elements. They define the criteria for selecting elements based on their attributes, relationships with other elements, or their position in the document structure.
Here are some common CSS selectors:
1. Universal Selector (`*`):
- Selects all elements in the document.
css
* {
/* Applies styles to all elements */
}
 |
| CSS Selectors |
2. Type Selector:
- Selects all elements of a specific type.
css
p {
/* Applies styles to all <p> elements */
}
3. Class Selector (`.`):
- Selects all elements with a specific class attribute.
css
.highlight {
/* Applies styles to all elements with class="highlight" */
}
4. ID Selector (`#`):
- Selects a single element with a specific ID attribute.
css
#header {
/* Applies styles to the element with id="header" */
}
5. Attribute Selector (`[]`):
- Selects elements based on their attributes.
css
input[type="text"] {
/* Applies styles to all <input> elements with type="text" */
}
6. Descendant Selector (Whitespace):
- Selects all descendants of a specific element.
css
article p {
/* Applies styles to all <p> elements that are descendants of an <article> */
}
 |
| CSS Selectors example |
7. Child Selector (`>`):
- Selects all direct children of a specific element.
css
ul > li {
/* Applies styles to all <li> elements that are direct children of a <ul> */
}
8. Adjacent Sibling Selector (`+`):
- Selects an element that is immediately preceded by a specific element.
css
h2 + p {
/* Applies styles to the <p> element that is immediately preceded by an <h2> */
}
 |
| universal selector |
9. Pseudo-classes:
- Selects elements based on their state or position.
css
a:hover {
/* Applies styles to links when hovered over */
}
li:nth-child(odd) {
/* Applies styles to odd-numbered <li> elements */
}
10. Pseudo-elements:
- Selects a specific part of an element.
css
p::first-line {
/* Applies styles to the first line of all <p> elements */
}
These are just a few examples of CSS selectors. By combining and nesting these selectors, you can create powerful rules for styling different elements in your HTML document.