Selectors in CSS
CSS selectors are patterns used to select and style HTML elements. They define which elements in your HTML document should be affected by the CSS rules.The CSS selectors module provides us with more than 60 selectors and five combinators. Other modules provide additional pseudo-class selectors and pseudo-elements.
All Css Selectors
| Selector | Example | Description | Try |
|---|---|---|---|
| #id | #hello | Select element with a specific id. | Try it |
| .class | .cls | Select elements with a specific class. | Try it |
| Universal | * | Select all elements. | Try it |
| Element | p | Select all <p> elements by thier tag name. | Try it |
| Grouping | h1,h2,div,span,p | Apply the common styles for multiple selectors in grouping. | Try it |
| Descendant | div p | Selects inside the elements in another element. | Try it |
| Child | div > p | Selects the direct children in element. | Try it |
| Adjacent Sibling | h1 + p | Selects the element that is immediately following another. | Try it |
| General Sibling | h1 ~ p | Selects all sibilings after an argument. | Try it |
| Exact Match | input[type="text"] | select all <input> elements with the type attribute exactly set to "text". | Try it |
| Partial Match | a[href*="example"] | select all <a>(anchor) elements where the href attribute contains the substring "example" . | Try it |
| Starts with | input[name^="user"] | select all <input> elements where the name attribute starts with the substring "user". | Try it |
| End with | a[href$=".txt"] | select all <a> (anchor) elements where the href attribute ends with the substring ".txt" | Try it |
| Attribute Presence | input[required] | select all <input> elements that have the required attribute | Try it |
| Structural Pseudo-Classes | :first-child, :last-child, :nth-child(), :nth-last-child(), etc | select the first <li> element inside its parent. It applies the font-weight: bold style to the first <li> in the list. | Try it |
| UI states | :hover, :focus, :active, :visited, :checked, etc | select a <button> element when the user hovers over it | Try it |
| Negotions | div:not(.excluded) | select all <div> elements except those that have the class excluded | Try it |
| ::before / ::after: | p::before { } | Its used to insert the content before or after an element. | Try it |
| ::first-line / ::first-letter: | p::first-line { } | Its used to select the first line of a <p> element and applies the. | Try it |
| ::marker | li::marker { } | select list item markers. | Try it |
| :is() / :where(): | :is(h1, h2, h3){ } | Matches any element listed inside. | Try it |
| :has(): | div:has(img){ } | Select the elements containing specific children | Try it |
| :not(): | input:not([type="submit"]){ } | Excludes elements match the selectors. | Try it |