Universal Selector
It's a CSS selector that matches all elements on a web page, regardless of their type, class, or ID.Represented by a single asterisk symbol (*)
SYNTAX
* {
property: value;
}
EXAMPLE
* {
font-family: Arial, sans-serif; /*Setting a base font for all elements*/
}
Individual Selector
Targets elements based on their HTML tag name.
SYNTAX
element-name {
...
}
EXAMPLE
p {
background-color: #d1ea76; /* All paragraphs will have this background color */
}
h1 {
font-size: 2rem; /* All headings of level 1 will have this font size */
}
Class and ID Selector
Class Selector: Target multiple elements that share common styles.Useful for styling groups of elements with similar formatting.Can be applied to any number of elements.
SYNTAX
.class-name {
...
}
EXAMPLE
<p class="highlight">This paragraph will be highlighted.</p>
<h2 class="highlight">This heading will also be highlighted.</h2>
.highlight {
background-color: yellow;
}
ID Selector: Target a unique, single element on the page.Should only be used once per page.More specific than any other selector.Ideal for targeting specific elements for unique styling or JavaScript interactions.
SYNTAX
#id-name {
...
}
EXAMPLE
<header id="main-header">This is the main header.</header>
#main-header {
background-color: blue;
color: white;
}
And Selector (chained)
Chained selectors increase specificity, allowing you to create more precise targeting rules.They can be used to target elements based on their nesting structure, their combination of classes, or their relationship to other elements in the document.It's essential to use them carefully to avoid unintended style conflicts or overly complex CSS rules.
SYNTAX
selector1 selector2 selector3 {
/* styles to apply to elements matching all selectors */
}
EXAMPLES
- Targeting elements with multiple classes
<li class="bg-black text-white">item1</li>
li.bg-black.text-white {
background-color: #000; /* /* Targets elements with both classes "bg-black" and "text-white" */
}*/
color: #fff;
}
- Combining element, class, and ID selectors
ul li.active a#main-link {
text-decoration: underline; /* Targets links with ID "main-link" within active list items within unordered lists */
}
- Targeting elements within a specific section
#main-content p {
font-size: 16px; /* Targets paragraphs within the element with ID "main-content" */
}
Combined Selector
Combination of properties and separated by comma's
SYNTAX
property,property{
...
}
EXAMPLE
span, li {
background-color: #86673e;
}
Inside an Element
Select elements that are descendants of other elements, regardless of their nesting level.
SYNTAX
ancestor descendant {
...
}
EXAMPLE
<div>
<p>lorem</p>
<li>awesome</li>
<ul>
<li>highlight me <a href="#">test</a></li>
<li>highlight me</li>
</ul>
</div>
/*Both <li> will be get background-color, as <li> is the descendant <ul> i.e <ul> is ancestor and similarly <ul> is descendant i.e <div> is ancestor */
div ul li {
background-color: #4b35f1;
}
Direct Child
Select only direct children of an element, not grandchildren or deeper descendants.
SYNTAX
parent > child {
...
}
EXAMPLE
<div>
<p>lorem</p>
<li>awesome</li>
<ul>
<li>highlight me <a href="#">test</a></li>
<li>highlight me</li>
</ul>
</div>
/*<p>,<li> and <ul> direct of <div>, so <p>,<li> and <ul> are siblings*/
div > li {
background-color: #7667e4;
}
Sibling Selector ~ and +
Sibling selectors are used to target elements based on their relationship to other elements that share the same parent.
- Adjacent Sibling Selector (+)
Selects elements that immediately follow another specific element, with no other siblings in between.
SYNTAX
selector1 + selector2{
...
}
EXAMPLE
<section>
<p class="sibling">Test 1</p>
<p>Test 2</p> /*Test 2 will be targed and background color will get pink (immediate next)*/
<p>Test 3</p>
<p>Test 4</p>
<p>Test 5</p>
</section>
.sibling + p {
background-color: pink;
}
- General Sibling Selector (~)
Selects elements that follow another specific element, but they don't have to be immediately adjacent.
SYNTAX
selector1 ~ selector2 {
...
}
EXAMPLE
<ul>
<li>Reading exciting novels.</li> /*Except this all the <li> will be targeted.*/
<li>Listening to uplifting music.</li>
<li>Hiking in the fresh air.</li>
<li>Trying new and delicious recipes.</li>
<li>Spending time with loved ones.</li>
</ul>
li ~ li {
/* Targets all list items except the first one */
background-color: #4e4949;
}
Top comments (0)