A CSS selector is the part of a CSS rule that describes what elements in a document the rule will match. The matching elements will have the rule’s specified style applied to them.
There are 5 categories of selectors:
Simple selectors
id selector
<div id="logo">
Hello ID
</div>
<style>
#logo{
color: blue;
}
</style>
class selector
<div class="name">
Laulau
</div>
<div class="name">
Kinga
</div>
<style>
.name{
color: red;
}
/*or*/
div.name{
color: red;
}
</style>
element selector
<p>
Laulau
</p>
<p>
Kinga
</p>
<style>
p{
color: green;
}
</style>
Universal(*) selector
universal selector (*) selects all HTML elements on the page.
<style>
* {
text-align: center;
color: black;
}
</style>
Group selector
group selectors minimize how much code you have to write. To group selectors, separate each selector with a comma.
h3, h4, p, div {
text-align: left;
color: black;
}
Combinator selectors
A combinator is something that explains the relationship between the selectors.
Descendant selector (space)
descendant selector matches all elements that are descendants of a specified element.
<ul>
<li>
<div>List 1</div>
<ul>
<li>Name A</li>
<li>Name B</li>
</ul>
</li>
<li>
<div>List 2</div>
<ul>
<li>Name A</li>
<li>Name B</li>
</ul>
</li>
</ul>
<style>
li {
list-style-type: disc;
}
li li {
list-style-type: circle;
}
</style>
Child selector
child selector selects all elements that are the children of a specified element.
div > div > p{
background-color: red;
}
<div class="col-9">
<div>
<p>
Laulau
</p>
<p>
Kinga
</p>
</div>
</div>
Adjacent sibling selector(+)
Adjacent sibling selector matches the second element only if it immediately follows the first element, and both are children of the same parent element. This only applies to the first element found.
<div class="col-9">
<img src="superman.jpeg" alt="superman" />
<span>superman</span>
</div>
<style>
img + span {
font-weight: bold;
}
</style>
General sibling selector(~)
general sibling selector selects all elements that are siblings of a specified element.
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And this is a red span!</span>
<code>More code...</code>
<h2> that's all. </h2>
<span>And yet again this is a red span!</span>
<style>
/* general sibling */
p ~ span {
color: purple;
font-weight: bold;
}
</style>
Pseudo-class selector
A pseudo-class is used to define a special state of an element.
Examples:
<div class="row">
<div class="col-3">
Pseudo-classes Selector<br>
</div>
<div class="col-9">
<a>Hover here <span>man</span></a>
</div>
</div>
<style>
/* pseudo-classes selector */
a > span:hover {
background-color: blue;
}
</style>
Pseudo-class selector :first-child
:first-child represents the first element among a group of sibling elements.
<style>
/* first-child <p> under parent with id first-child */
#first-child p:first-child {
color: green;
background-color: blue;
font-weight: bold;
}
</style>
Pseudo-class selector :nth-child(n)
:nth-child(n) matches elements based on their position in a group of siblings.
<style>
/* second child under parent with id nth-child
#nth-child p:nth-child(2){
color: blue;
}
</style>
Pseudo-element selector ::before
::before pseudo-element can be used to insert some content before the content of an element.
<div class="row">
<div class="col-3">
Pseudo-element Selector<br>
<strong>::before</strong> pseudo-element can be used to insert some content before the content of an element.<br>
</div>
<div class="col-9" id="before">
<p>The first paragraph.</p>
<p>The second paragraph.</p>
</div>
</div>
<style>
#before p::before{
content: "->";
}
</style>
Pseudo-element selector ::after
::after pseudo-element can be used to insert some content after the content of an element.
<div class="row">
<div class="col-3">
Pseudo-element Selector<br>
<strong>::after</strong> pseudo-element can be used to insert some content after the content of an element.<br>
</div>
<div class="col-9" id="after">
<p>The first paragraph.</p>
<p>The second paragraph.</p>
</div>
</div>
<style>
/* add <- in front of <p> */
#after p::before{
content: "<-";
}
</style>
Attribute
attribute selector is used to select elements with a specified attribute.
<div class="row">
<div class="col-3">
Attribute Selector<br>
<strong>[attribute]</strong> selector is used to select elements with a specified attribute.<br>
</div>
<div class="col-9" id="attribute">
<p title="first-para">The first paragraph.</p>
<p title="second-para">The second paragraph.</p>
</div>
</div>
<style>
#attribute p[title]{
background-color: purple;
}
</style>
Attribute value
attribute value selector is used to select elements with a specified attribute and value.
<div class="row">
<div class="col-3">
Attribute Selector<br>
<strong>[attribute="value"]</strong> selector is used to select elements with a specified attribute.<br>
</div>
<div class="col-9" id="attributeValue">
<p title="first-para">The first paragraph.</p>
<p title="second-para">The second paragraph.</p>
</div>
</div>
<style>
#attributeValue p[title="first-para"]{
color: red;
}
</style>