![[The AI Show Episode 142]: ChatGPT’s New Image Generator, Studio Ghibli Craze and Backlash, Gemini 2.5, OpenAI Academy, 4o Updates, Vibe Marketing & xAI Acquires X](https://www.marketingaiinstitute.com/hubfs/ep%20142%20cover.png)
![[FREE EBOOKS] The Kubernetes Bible, The Ultimate Linux Shell Scripting Guide & Four More Best Selling Titles](https://www.javacodegeeks.com/wp-content/uploads/2012/12/jcg-logo.jpg){kind=logo}
![From drop-out to software architect with Jason Lengstorf [Podcast #167]](https://cdn.hashnode.com/res/hashnode/image/upload/v1743796461357/f3d19cd7-e6f5-4d7c-8bfc-eb974bc8da68.png?#)
.png?#)
.jpg?#)
 (1).webp?#)
_Christophe_Coat_Alamy.jpg?#)
![Rapidus in Talks With Apple as It Accelerates Toward 2nm Chip Production [Report]](https://www.iclarified.com/images/news/96937/96937/96937-640.jpg)
All CSS Selectors in One Place: Learn to Target Any Element
I will be talking about selectors in CSS, and how selectors are used to select an element on which style is going to be applied. Now, what kind of elements can we apply style on, and how can we select those elements? For example, element with an ID, element with a class, we can target the element by its name. We can also decide that if there is a particular type of element in a particular type of element, then only the styling is applied. I will be providing you the complete list of CSS selectors in this guide. This is a very important list of CSS. So increase your excitement, and let's go. 1. Universal Selector (*) * { margin: 0; padding: 0; } All elements will have no margin or padding. → Selects all elements on the page. 2. Type Selector (element) p { color: blue; } This text is blue. Another blue text. → Selects all elements. 3. Class Selector (.classname) .highlight { background-color: yellow; } This paragraph has a yellow background. → Selects all elements with the highlight class. 4. ID Selector (#idname) #main-title { font-size: 24px; } This is a large title. → Selects the element with the id="main-title". 5. Attribute Selectors [attribute] → Selects elements with the given attribute [data-info] { border: 2px solid red; } This has a custom attribute. [attribute=value] → Selects elements with the exact attribute value input[type="text"] { border: 1px solid blue; } → Selects only text inputs, not password inputs. [attribute~=value] → Selects elements where the attribute contains the word (space-separated) [class~="btn"] { background-color: red; } Click Me → Selects elements with the word "btn" in the class list. [attribute|=value] → Selects elements with the attribute value or value followed by a hyphen (-) [class|="lang"] { color: green; } This is English. This is French. → Matches lang-en and lang-fr because they start with lang. [attribute^=value] → Selects elements where the attribute starts with a value a[href^="https://"] { color: green; } Secure Link → Selects all links that start with https://. [attribute$=value] → Selects elements where the attribute ends with a value img[src$=".png"] { border: 3px solid blue; } → Selects all images ending in .png. [attribute*=value] → Selects elements where the attribute contains a value a[href*="example"] { font-weight: bold; } Visit Example → Selects all links that contain "example" anywhere in the URL. 6. Grouping Selector (selector1, selector2) h1, h2, h3 { font-family: Arial, sans-serif; } → Selects all , , and elements. 7. Combinators Descendant Combinator (parent child) div p { color: red; } This is red. → Selects all inside . Child Combinator (parent > child) div > p { color: blue; } This is blue. This is not blue. → Only direct inside turns blue. Adjacent Sibling Combinator (element1 + element2) h1 + p { font-style: italic; } Heading This is italic. → Styles the first after . General Sibling Combinator (element1 ~ element2) h1 ~ p { color: green; } Heading Green text. Also green. → Styles all elements after . 8. Pseudo-Classes User Interaction button:hover { background: red; } button:active { background: yellow; } Form & Input State input:checked { border: 2px solid green; } input:disabled { background: lightgray; } Structural p:first-child { font-weight: bold; } p:last-child { color: orange; } p:nth-child(2) { text-decoration: underline; } 9. Pseudo-Elements p::before { content: "
I will be talking about selectors in CSS, and how selectors are used to select an element on which style is going to be applied. Now, what kind of elements can we apply style on, and how can we select those elements?
For example, element with an ID, element with a class, we can target the element by its name. We can also decide that if there is a particular type of element in a particular type of element, then only the styling is applied.
I will be providing you the complete list of CSS selectors in this guide. This is a very important list of CSS. So increase your excitement, and let's go.
1. Universal Selector (*)
* {
margin: 0;
padding: 0;
}
All elements will have no margin or padding.
→ Selects all elements on the page.
2. Type Selector (element)
p {
color: blue;
}
This text is blue.
Another blue text.
→ Selects all elements.
3. Class Selector (.classname)
.highlight {
background-color: yellow;
}
class="highlight">This paragraph has a yellow background.
→ Selects all elements with the highlight class.
4. ID Selector (#idname)
#main-title {
font-size: 24px;
}
id="main-title">This is a large title.
→ Selects the element with the id="main-title".
5. Attribute Selectors
[attribute] → Selects elements with the given attribute
[data-info] {
border: 2px solid red;
}
data-info="123">This has a custom attribute.
[attribute=value] → Selects elements with the exact attribute value
input[type="text"] {
border: 1px solid blue;
}
type="text" placeholder="Enter text">
type="password" placeholder="Enter password">
→ Selects only text inputs, not password inputs.
[attribute~=value] → Selects elements where the attribute contains the word (space-separated)
[class~="btn"] {
background-color: red;
}
class="btn primary">Click Me
→ Selects elements with the word "btn" in the class list.
[attribute|=value] → Selects elements with the attribute value or value followed by a hyphen (-)
[class|="lang"] {
color: green;
}
class="lang-en">This is English.
class="lang-fr">This is French.
→ Matches lang-en and lang-fr because they start with lang.
[attribute^=value] → Selects elements where the attribute starts with a value
a[href^="https://"] {
color: green;
}
href="https://example.com">Secure Link
→ Selects all links that start with https://.
[attribute$=value] → Selects elements where the attribute ends with a value
img[src$=".png"] {
border: 3px solid blue;
}
src="logo.png">
→ Selects all images ending in .png.
[attribute*=value] → Selects elements where the attribute contains a value
a[href*="example"] {
font-weight: bold;
}
href="https://example.com">Visit Example
→ Selects all links that contain "example" anywhere in the URL.
6. Grouping Selector (selector1, selector2)
h1, h2, h3 {
font-family: Arial, sans-serif;
}
→ Selects all , , and elements.
7. Combinators
Descendant Combinator (parent child)
div p {
color: red;
}
This is red.
→ Selects all → Only direct → Styles the first → Styles all inside
Child Combinator (
parent > child)
div > p {
color: blue;
}
inside
Adjacent Sibling Combinator (
element1 + element2)
h1 + p {
font-style: italic;
}
Heading
This is italic.
after .
General Sibling Combinator (
element1 ~ element2)
h1 ~ p {
color: green;
}
Heading
Green text.
Also green.
elements after .
8. Pseudo-Classes
User Interaction
button:hover { background: red; }
button:active { background: yellow; }
Form & Input State
input:checked { border: 2px solid green; }
input:disabled { background: lightgray; }
Structural
p:first-child { font-weight: bold; }
p:last-child { color: orange; }
p:nth-child(2) { text-decoration: underline; }
9. Pseudo-Elements
p::before { content: "
