CSS Selectors
There are several CSS selectors available to work with HTML/CSS
Basic Selectors
1. *
Every single element on a page
* {
margin: 0;
padding: 0;
}
2. #
target by ID.
#container {
width: 1024px;
margin: auto;
}
You can not reuse this CSS because it is only for one element
3. X
class
the selector target group of elements
.msg {
color: green;
}
4. X
Target all the elements of the page according to the type of the element
a { color: blue; }
ul { margin-left: 0; }
Combinator selectors
5 X Y
ul li {
margin-left: 10px;
}
<ul>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
This is a descendant selector to target all li
inside the ul
tag
6 X+Y
This is called adjacent selector to select immediate element just after the former element.
ul + p {
color: red;
}
The first paragraph after the ul element will be selected.
7 X>Y
This is the same as the adjacent selector but this will select the immediate child element
8 X~Y
This is a sibling combinator
Attribute Selectors
9. X[title]
a[title] will select the tags which have the title attribute.
a[title] {
color: green;
}
10. X[href=url]
Select an anchor tag with a given URL
a[href="https://www.codekayak.net"] {
color: #83b348;
}
11. X[href*="foo"
]
Select an anchor tag where the given keyword is in the URL
a[href*="code"] {
color: #83b348;
}
Any URL with the keyword “code” will be selected
12. X[href^="http"]
Regular expression symbol ^ is to search a string by specifying the beginning of characters
<a href="http://domain.com/img/A.jpg" > A </a>
<a href="img/B.jpg" > B </a>
If you want to selector anchor tag with href
attribute starting with http
a[href^="http"] {
color: red;
}
13. X[href$=".jpg"]
<a href="img/A.jpg" > A </a>
<a href="img/B.jpg" > B </a>
<a href="img/C.png" > C </a>
<a href="img/D.jpg" > D </a>
You want to select the .jpg anchors you can use the regular expression $
a[href$=".jpg"] {
color: red;
}
14. X[data-*="foo"]
You can define custom attributes and select them
<div code-lang="java">Java </div>
<div code-lang="php">PHP </div>
<div code-lang="c">C </div>
Now if you want to select Java then use the following CSS
a[code-lang="java"] {
color: red;
}
15. X[foo~="bar"]
An attribute can have several values like below
<div data-set="Java PHP" > Languages </div>
With this, you can target above
div[data-info~="java"] {
color: red;
}
div[data-info~="PHP"] {
border: 1px solid black;
}
Pseudo Selectors
16. X:visited
X:links
:link
pseudo-class to target all links which have not been clicked
: visited pseudo-class to target all the links visited
a:link { color: red; }
a:visited { color: purple; }
17. X:checked
target radio button and checkbox that has been checked
input[type=radio]:checked {
border: 1px solid black;
}
18. X::after
To do creative things with CSS before
and after
pseudo-classes are great. This enables you to insert content into elements without using HTML. You do not find those content inside the DOM
div::before {
content: "before";
}
div::after {
content: "after";
}
Your HTML will be like this
<div>
before
<!-- Rest of stuff inside the div -->
after
</div>
The following content can be added :before
and :after
19 X:hover
You can select the element when you mouser over the element
div:hover {
background: #e3e3e3;
}
20. X:not(selector)
Not is used to exclude given selector
<div >
<div class="summary"> Summary goes here </div>
<div class="detail"> Details here </div>
</div>
If you want to change the color of the fonts of the details section you can use the :not
div:not(#summary) {
color: blue;
}
21. X::pseudoElement
Nth Child and Type Selectors
22. X:nth-child(n)
nth-child(n)
matches the n th child of its parent
<ul>
<li> Physics </li>
<li> Chemistry </li>
<li> Mathamatics </li>
</ul>
If you want to select 2nd chid of ul
you can use the following style class
ul:nth-child(3) {
color: red;
font-style: bold;
}
23. X:nth-last-child(n)
nth-last-child(n) matches the elements from its parents but n the element is counting from the last child
<ul>
<li>Chemistry</li>
<li>Physics</li>
<li>Maths</li>
<li>Computer Science</li>
</ul>
li:nth-last-child(2) {
color: red;
font-weight: bold;
}

24. X:nth-of-type(n)
The :nth-of-type()
matches elements based on their position among siblings of the same type (tag name).
p:nth-of-type(3) {
color: red;
font-weight: bold;
}
This will match the 3rd p
element of the group
<div>
<p>Paragraph 1</p>
<div>Section 1</div>
<div>Section 2</div>
<div>Section 3</div>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>

25. X:nth-last-of-type(n)
The :nth-last-of-type()
matches elements based on their position, from the last among siblings of the same type (tag name).
p:nth-last-of-type(3) {
color: red;
font-weight: bold;
}
26. X:first-child
The :first-child
select the first element among a group of sibling elements.
p:first-child{
color: red;
font-weight: bold;
}
27. X:last-child
The :last-child
select the last element among a group of sibling elements.
last-child{
color: red;
font-weight: bold;
}
28. X:only-child
The :only-child
select the element without any sibling
p:only-child {
background-color: lime;
}
You can achieve the same thing with following CSS pseudo-classes
- :first-child
- :last-child
- :nth-child(1)
- :nth-last-child(1)
29. X:only-of-type
The :only-of-type
select an element but it does not have a sibling of the same type.
p:only-of-type {
color: red;
}
30. X:first-of-type
The :first-of-type
select the first element of its type among a group of sibling elements.
p:first-of-type {
color: red;
}