Understanding CSS selectors | week2
Learning Fundamental topic "Selectors" with few examples | CSS | Frontend
In this article we are going to learn selectors one of the important topic of CSS. Selector is an Initial thing that matters between the CSS and HTML. We use CSS to style the HTML elements, here selectors helps web designer to target elements to whom these particular CSS properties should be applied for.
So we can say that selectors are to target or select the elements to add styles.
As I understood there are 4 basic selector's id(#), class(.), elements and Universal(*) which are widely used. But here we are going to discuss 10 types of selectors. let's discuss about one by one.
1.Universal Selector(*)
The universal selector selects all the elements by default. The styling properties written in Universal selector block will be applied for all elements, unless it is imported with it's own styling properties.
Syntax
" * " sign indicates universal selector
<head>
<styling>
/*Here is declaration*/
*{
background-color: #0efc1d;
}
</styling>
</head>
<body>
<h2>This is Demo</h2>
</body>
OutPut
2.Individual Selector
As it's name indicates we can select individual elements by mentioning tag/element. So the default styling properties of that tag will be overridden. If we take p tag, all the p tags will be applied with the new CSS properties.
Syntax
Name of the target tag is mentioned.
<head>
<style>
p{
color: red;
}
h4{
color: blueviolet;
}
</style>
</head>
<body>
<h4>This is element one</h4>
<p>This is element two</p>
</body>
3.Class and ID
Here ID based selector is used to particular Unique Element, as we know ID value is unique in HTML. And it is defined by
Class based selector is preferred for selecting two or more elements.
Syntax
for ID based one, ' # 'sign is used
<head>
<style>
/*Here is declaration*/
#test-IDx{
color: red;
}
#test-IDy{
color: rgb(0, 255, 72);
}
</style>
</head>
<body>
<h1 id="test-IDx">This is applied with test-IDx class</h1>
<p id="test-IDy">This is effected by IDy class</p>
</body>
for Class based one, ' . ' is used
<head>
<style>
/*Here is declaration*/
.test-cl{
color:red ;
}
</style>
</head>
<body>
<p class="test-cl">This is effected</p>
<p>This doesn't effect</p>
</body>
4.AND selector or Chained selector
This is like AND operation based selector, that element is selected only if all the chain of mentioned classes are specified in that element. If at least thing is missing then it doesn't apply. All the classes are dot(" . ") separated while declaring.
Syntax
All are " . "dot separated class names.
<head>
<style>
/*Here is declaration*/
li.bg-clr.bg-text{
color:red ;
}
</style>
</head>
<body>
<li class="bg-clr bg-text">This is effected</li>
<li>This is not effected</li>
</body>
}
5.Combined Selector
Targeting multiple elements will be applied with the same properties. Elements are mentioned with " , " separated. It is just like Individual selector but multiple elements are mentioned to selected which need the same styling property.
Syntax
Comma(,) separated group of elements are mentioned...
<head>
<style>
/*Here is declaration*/
p,
li {
background-color: #bbb;
color: pink;
}
h2 {
color: orange;
}
</style>
</head>
<body>
<h2>This is Different class</h2>
<p>This is part of Combined selector</p>
<li>List element1</li>
</body>
6.Inside Selector (space seperated)
It selects all the specified elements irrespective of that is child or grandchild of targeted element. If we specify p tag inside div tag, then it will select all the p tags inside that div tag irrespective of that it's relation with the div tag.
Syntax
Elements with space separated and first element is target element and last elements in that list is specified element to which styling should be applied.
<head>
<style>
/*Here is declaration*/
div p{
background-color: #ba0d0d;
color: orange;
}
</style>
</head>
<body>
<div>
<p>This is styled1</p>
<p>This is also styled2</p>
<li>NOT styled</li>
<section>
<li>Not styled</li>
<p>This is also styled4</p>
</section>
</div>
</body>
7.Direct Child (>)
It selects specified element type only and which are grand child of target type element only.
It is just like Inside Selector but Main difference is that it just selects its direct child elements only.
Syntax
" > " sign is used for direct child. In the below example div is target tad and p is specified tag
<head>
<style>
/*Here is declaration*/
div>p{
background-color: #ba0d0d;
color: orange;
}
</style>
</head>
<body>
<div>
<p>This is styled1</p>
<p>This is also styled2</p>
<li>NOT styled</li>
<section>
<li>Not styled</li>
<p>Not styled4</p>
</section>
</div>
</body>
8.Sibling Selector
We can select adjacent elements of the target element by using Sibling Selectors. We have two operators '+' and '~' which work similar with difference in scope of selection.
Operator '+' only selects immediate next element of the specified element. In the following example the p element which is just after the div tag is selected and nothing else effected.
<head>
<style>
/*Here is declaration*/
div + p {
background-color: #ba0d0d;
color: orange;
}
</style>
</head>
<body>
<div>
<li>NOT styled</li>
</div>
<p>This is styled</p>
<p>NOT styled1</p>
<div>Some code</div>
<p>This is Styled2</p>
</body>
Operator '~' Selects all the next sibling elements elements after the specified tag which awakes the styling class. In the following example all the sibling p elements are selected after the Div element which are sibling.
<head>
<style>
/*Here is declaration*/
div ~ p {
background-color: #ba0d0d;
color: orange;
}
</style>
</head>
<body>
<p>Not Selected1</p>
<div>
<li>Some code</li>
</div>
<p>This is styled1</p>
<p>This is styled2</p>
<div>Some code</div>
<p>This is Styled3</p>
</body>
Last But not least
Pseudo-class keywords
It is a keyword attached to the target element, the keyword represents a particular state. The target element is styled on that particular state which is mentioned by the pseudo class keyword.
Let's take ":hover" keyword, when the mouse pointer is hovered over the element the styling is applied to that element.
<head>
<style>
button{
height: 10px;
padding: 30px;
border-radius: 10px;
}
/*Here is declaration*/
button:hover {
background-color: #e26868;
color: orange;
border-color: blue;
border-radius: 20;
}
</style>
</head>
<body>
<h1>Demo of :hover keyword</h1>
<Button>TestButton</Button>
</body>
General State
On Hover state
The default properties will exist but the existing values are overwritten on that state(If any).
There are lot of keywords like :after, :before, :autofill and so on which indicates different states for different elements, we are not discussing them here. But if you are interested in learning them just check out mdm Docs for more details.
Give a Thumbs-Up 👍 if it's helpful...
Thanks for reading <3
