Categories
CSS (Cascading Style Sheets), a selector is a pattern that is used to target and select HTML elements on a web page. Once selected, you can apply specific styles and formatting to those elements. Selectors are a fundamental part of CSS and play a crucial role in defining how the HTML content should be presented in terms of layout, color, typography, and other visual aspects.
The basic syntax of a CSS selector is as follows:
selector {
property: value;
/* more properties and values */
}
In this syntax, the "selector" is the part that selects the HTML element(s), and within the curly braces, you specify the CSS properties and values to be applied to the selected element(s).
There are various types of selectors in CSS:
1) Element Selector: Selects elements based on their tag names. For example, to target all paragraphs, you would use the selector p.
/* Target all <p> elements */
p {
color: blue;
}
2) Class Selector: Selects elements based on their class attribute. It is denoted by a period (.) followed by the class name. For example, to target all elements with the class "highlight," you would use the selector .highlight.
/* Target all elements with class "highlight" */
.highlight {
background-color: yellow;
}
3) ID Selector: Selects an element based on its unique ID attribute. It is denoted by a hash (#) followed by the ID name. For example, to target the element with the ID "header," you would use the selector #header.
/* Target the element with ID "header" */
#header {
font-size: 24px;
}
4) Attribute Selector: Selects elements based on their attributes. For example, to target all elements with a specific attribute, such as input[type="text"], which targets all text input fields.
/* Target all <input> elements with type="text" */
input[type="text"] {
border: 1px solid #ccc;
}
5) Descendant Selector: Selects elements that are descendants of another element. It is represented by whitespace between two selectors. For example, to target all list items within an unordered list, you would use the selector ul li.
/* Target all <li> elements inside <ul> */
ul li {
list-style-type: square;
}
6) Pseudo-class Selector: Selects elements in specific states or conditions, such as :hover, which applies styles when the element is being hovered over by the mouse.
/* Apply styles to links when hovered over */
a:hover {
text-decoration: underline;
}
7) Pseudo-element Selector: Selects parts of an element, such as ::before or ::after, which add content before or after the selected element's content.
/* Add content before the content of a <p> element */
p::before {
content: "→ ";
}