Today i had Task to learn about the selectors using in HTML&CSS, how to use why it used to style. By using the selectors, what is benefits and what happens while using the selectors.
Selectors
A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should have the CSS property values inside the rule applied to them. The element or elements selected by the selector are referred to as the subject of the selector.
In earlier articles, you met various selectors and learned that there are selectors that target the document in different ways; for example, by selecting an element such as h1, or a class such as .special. Let's start by recapping the main ones you've already seen.
We can divide CSS selectors into five categories:
- Simple selectors (select elements based on name, id, class)
- Combinator selectors (select elements based on a specific relationship between them)
- Pseudo-class selectors (select elements based on a certain state)
- Pseudo-elements selectors (select and style a part of an element)
- Attribute selectors (select elements based on an attribute or attribute value)
CSS Selectors are patterns used in CSS to select and target HTML elements so that styles can be applied to them. They define which elements on a web page should receive specific styling rules.
- Used to select HTML elements based on tag name, class, id, or attributes.
- Help apply styles like color, font, spacing, and layout.
- Make web pages structured, consistent, and visually appealing.
Types of selectors
1. Simple selectors
Basic selectors in CSS are simple tools used for selecting by HTML element name (e.g., h1), class (.class Name), ID (#idName), or universally (* for all elements).
Universal selector(*):
Selects all elements on the page and applies the same style universally.
Example: Setting the font color for every element.
<style>
* {
color: red;
}
</style>
Element selector:
Targets all elements of a specific type, such as paragraphs or headers.
Example: Setting a common font size for all paragraphs
<style>
p {
font-size: 16px;
}
</style>
Class selector(.):
Applies styles to elements with a specific class attribute.
Example: Making all buttons have a blue background.
<style>
.button {
background-color: blue;
color: white;
}
</style>
ID selector(#):
Styles a single element identified by its unique id.
Example: changing the background color of a header.
<style>
#header {
background-color: gray;
}
</style>
2. Combination selectors(TBD)
Used to define relationships between selectors, allowing you to style elements based on their hierarchy or positioning in the document. Common combinators include descendant ( ), child (>), adjacent sibling (+), and general sibling (~).
Descendant Selectors:
Targets an element inside another, such as paragraphs inside div .
Example: Styling paragraphs inside a div.(TBD)
<style>
div p {
color: red;
}
</style>
Child Selector (>):
They only affects the direct child elements of a parent.
Example: Styling direct children paragraphs of a div.(TBD)
<style>
div>p {
margin-left: 20px;
}
</style>
Adjacent Sibling Selector (+):
Styles an element immediately following another .
Example: Making the first paragraph bold after an h1.(TBD)
<style>
h1+p {
font-weight: bold;
}
</style>
General Sibling Selector (~):
Styles all siblings that follow a specific element.
Example: Italicizing all paragraphs following an h1.
<style>
h1~p {
font-style: italic;
}
</style>
Attribute selector(TBD)
Attribute selectors in CSS target elements based on the presence or value of their attributes.
Presence Selector:
It selects elements that contain a specific attribute.
Example: styling all inputs with a type attribute.
<style>
input[type] {
border: 2px solid black;
}
</style>
Attribute Value Selector:
It targets elements with a particular attribute value.
Example: Styling text inputs.
<style>
input[type="text"] {
background-color: yellow;
}
</style>
Substring Matching(^=):
It matches elements where the attribute contains a substring.
Example: Styling links with https in their href.
<style>
a[href^="https"] {
color: green;
}
</style>
3. Pseudo-Classes(TBD)
Pseudo-classes in CSS define the special states of elements for styling.
:hover:
Styles elements when the user hovers over them.
Example: Changing the color of a link when hovered.
<style>
a:hover {
color: red;
}
</style>
:focus:
Styles the elements when the user focus on any particular element.
<style>
input:focus {
outline: 3px solid red;
}
</style>
Pseudo-Elements(TBD)
Pseudo-elements allow you to target and style specific parts of an element, such as inserting content before or after it.
- They can be used to style parts of text, like the first letter or line of a paragraph.
- Pseudo-elements are commonly used to enhance and beautify the internal content of elements.
::before:
To insert some content before an element.
<style>
h1::before {
content: "★ "
}
</style>
::after:
To insert some content after an element.
<style>
h1::after {
content: "☀ ";
color: orangered;
}
</style>
::first-line:
Styles the first line of text within a block element. Line breaks mark the beginning of a new line.
<style>
p::first-line {
color: red;
}
</style>
::placeholder:
Styles the placeholder of a specific input field.
<style>
input::placeholder {
font-size: 20x;
font-family: sans-serif;
font-weight: 900;
}
</style>
References
1.https://www.geeksforgeeks.org/css/css-selectors/
2.https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors
3.https://www.w3schools.com/css/css_selectors.asp
4.https://mimo.org/glossary/css/selectors
Top comments (0)