CSS Selectors
CSS selectors are used to target HTML elements on your pages, allowing you to apply styles based on their ID, class, type attributes, and more. There are mainly 5 types of selectors.
- Basic CSS Selectors: These are used to target elements by tag, .class, or #id for fundamental styling needs.
- Combinators: Ideal for styling elements based on their DOM relationships (e.g., parent-child or sibling relationships).
- Group Selectors: Use to apply the same styles to multiple, unrelated elements simultaneously.
- Attribute Selectors: Perfect for styling elements based on specific attributes or values, such as form inputs or links with certain prefixes or states.
- Pseudo-Classes: Best for styling elements dynamically or interactively, like :hover for user interaction or :nth-child() for structural styling.
Types of CSS Selectors
Basic Selectors
Basic selectors in CSS are simple tools used to target specific HTML elements for styling. These include selecting by element name (e.g., h1), class (.class Name), ID (#idName), or universally (* for all elements).
1. Universal Selector (*): Selects all elements on the page and applies the same style universally. For example, setting the font color for every element.
* {
color: red;
}
2. Element Selector: Targets all elements of a specific type, such as paragraphs or headers. For example, setting a common font size for all paragraphs
<style>
p {
font-size: 16px;
}
</style>
3. Class Selector (.): Applies styles to elements with a specific class attribute. For instance, making all buttons have a blue background.
<style>
.button {
background-color: blue;
color: white;
}
</style>
4. ID Selector (#): Styles a single element identified by its unique id. For example, changing the background color of a header
<style>
#header {
background-color: gray;
}
</style>
Combinator Selectors
Combinators in CSS are 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 (~).
1. Descendant Selectors: Targets an element inside another, such as paragraphs inside div .For example, styling paragraphs inside a div.
<style>
div p {
color: red;
}
</style>
2. Child Selector (>): They only affects the direct child elements of a parent. For example, styling direct children paragraphs of a div.
<style>
div>p {
margin-left: 20px;
}
</style>
3. Adjacent Sibling Selector (+): Styles an element immediately following another .For example, making the first paragraph bold after an h1.
<style>
h1+p {
font-weight: bold;
}
</style>
4. General Sibling Selector (~): Styles all siblings that follow a specific element. For example, italicizing all paragraphs following an h1.
<style>
h1~p {
font-style: italic;
}
</style>
Attribute Selectors
Attribute selectors in CSS target elements based on the presence or value of their attributes. Examples include [attr] (selects elements with the attribute), [attr=”value”] (matches specific values), and [attr^=”val”] (matches values starting with “val”).
1. Presence Selector: It selects elements that contain a specific attribute. For example, styling all inputs with a type attribute.
<style>
input[type] {
border: 2px solid black;
}
</style>
2. Attribute Value Selector: It targets elements with a particular attribute value. For example, styling text inputs.
<style>
input[type="text"] {
background-color: yellow;
}
</style>
3. Substring Matching(^=): It matches elements where the attribute contains a substring. For example, styling links with https in their href.
<style>
a[href^="https"] {
color: green;
}
</style>
4. Wildcard Selector (*=): Matches elements where the attribute value contains a specific string. For example, underlining links with example in the URL.
<style>
a[href*="example"] {
text-decoration: underline;
}
</style>
Pseudo-Classes
Pseudo-classes in CSS define the special states of elements for styling. Examples include :hover (applies when an element is hovered), :first-child (targets the first child of a parent), and :nth-child(2) (targets the second child).
1. :hover: Styles elements when the user hovers over them. For example, changing the color of a link when hovered.
<style>
a:hover {
color: red;
}
</style>
2. :focus: Styles the elements when the user focus on any particular element.
<style>
input:focus {
outline: 3px solid red;
}
</style>
3. :first-child: Styles the element which is the first child of it’s parent.
<style>
p:first-child {
color: brown;
}
</style>
4. :last-child: Style’s the element which is the last child of it’s parent.
<style>
p:last-child {
color:green;
}
</style>
5. :not: Helps to remove a particular element from the styling index or styling context.
<style>
p:not(.one) {
color: blue;
}
</style>
5. Pseudo-Element’s
The Pseudo Element help’s to access and control a specific part of an element for inserting content before an element or inserting content after an element. Targeting any specific part of a word or a sentence. It is usually used to beautify the internal content of an element.
1. ::before : It helps to insert some content before an element.
<style>
h1::before {
content: "★ "
}
</style>
2. ::after: It help’s to insert some content after an element.
<style>
h1:active::before {
content: "☀ ";
color: orangered;
}
</style>
3. ::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>
4. ::first-letter: It Styles the first-letter of a word or a sentence.
<style>
p::first-letter {
color: red;
font-size: 23px;
}
</style>
5. ::placeholder: Styles the placeholder of a specific input field.
<style>
input::placeholder {
font-size: 20x;
font-family: sans-serif;
font-weight: 900;
}
</style>
CSS Selectors-FAQ’s
1. What are CSS selectors?
CSS selectors are patterns used to target and style specific HTML elements. They allow you to apply styles to elements based on their tag name, class, ID, attributes, and more.
2. What is the difference between an ID and a class selector?
The ID selector (#id) targets a single, unique element, while the class selector (.class) can target multiple elements that share the same class.
3. How do I select elements inside another element?
You can use a descendant selector or combinators. For example, div p selects all <p> elements inside <div> elements.
4. What is a pseudo-class in CSS?
A pseudo-class defines the state of an element. For example, :hover applies styles when the user hovers over an element, and :first-child targets the first child of a parent.
5. Can I combine multiple selectors?
Yes, you can combine selectors to increase specificity or apply styles to multiple elements. For example, h1, .title styles all <h1> elements and elements with the class title.
