Today i have learn about the selectors in css. and i learn why we use the selectors and how it works and what are the benefits of using this selectors.
Selectors
CSS selectors are code patterns used to target and style specific HTML elements on a webpage.
CSS selectors types:
simple selectors (element select 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).
Universal selectors: * targets every single element on the webpage.
Group selectors: h1, p, span applies the exact same styles to multiple comma-separated rules concurrently.
CSS element selectors
The element selector selects HTML elements based on the element name.
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique element!.
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
HTML elements can also refer to more than one class.
The CSS Universal Selector
- The universal selector (*) selects all HTML elements on the page.
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style definitions.
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
Child Selectors
The CSS child selector (officially called the child combinator) uses the > symbol to target elements that are direct children of a specified parent element. It only looks one level down the HTML document hierarchy.
/* Child */
header > h1 {
/* Selects all Heading 1 elements that are children of Header elements. */
}
General sibiling
- The CSS general sibling selector (represented by the tilde symbol ~) matches all iterations of a second element that follow a specified first element and share the same parent.
/* General sibling */
h1 ~ p {
/* Selects a Paragraph as long as it follows a Heading 1. */
}
Adjacent Sibling
The CSS adjacent sibling selector (+) selects an element that is placed immediately after another specific element, provided they both share the same parent element.
/* Adjacent sibling */
h1 + p {
/* Selects a Paragraph if it immediately follows a Heading 1 */
}
Attribute selectors
ID and class selectors technically fall into this attribute selectors category. We call them “attributes” because they are present in the HTML and give more context about the element. All of the following are attributes in HTML:
<!-- ID, Class, Data Attribute -->
<article id="#id" class=".class" data-attribute="attribute">
</article>
<!-- href, Title, Target -->
<a href="https://css-tricks.com" title="Visit CSS-Tricks" target="_blank"></a>
<!-- src, Width, Height, Loading -->
<img src="star.svg" width="250" height="250" loading="laxy" >
<!-- Type, ID, Name, Checked -->
<input type="checkbox" id="consent" name="consent" checked />
<!-- Class, Role, Aria Label -->
<div class="buttons" role="tablist" aria-label="Tab Buttons">
a[href="https://css-tricks.com"] {
color: orangered;
}
Pseudo-selectors
- Pseudo-selectors are for selecting pseudo-elements, just as element selectors are for selecting elements. And a pseudo-element is just like an element, but it doesn’t actually show up in the HTML. If pseudo-elements are new to you, we have a quick explainer you can reference.
Every element has a ::before and ::after pseudo-element attached to it even though we can’t see it in the HTML.
.container::before {
/* Styles */
}
.container::before {
content: "";
}
Top comments (0)