Hi everyone, today let's learn about selectors in CSS.
CSS selectors are used to select HTML elements and apply styling to them.
Let's go line by line and learn each selector in CSS
Basic Selectors
Universal Selectors
It simply says select all the elements. Example * will match all the elements in the document.
*{
margin:0;
padding:0;
}
The above code will apply margin 0 and padding 0 in all the elements in the document.
Type Selectors
These type selectors help you directly select HTML elements in the documents. Examples like a div, nav, section, ul tags, etc. all Html elements.
li{
list-style:none;
}
The above will remove the dots in the list element. Try it and comment down that I have used it
Class Selectors
In HTML elements you can create a class using class="class_name" and you can select this class in CSS using .class_name
.class_name{
display:flex;
}
Make the class element flex.
ID Selectors
Just like Class selectors, you can create an id in HTML using id = id_name . Developers also use id to apply CSS but you shouldn't use it that way because the class is there, ID is used to give a unique name to elements and identify. A perfect example would be Facebook engineers dynamically generating IDs in applications and using them. If you want you can select an Id with #id_name in css.
#id_name{
display:flex;
}
Never use for css purposes.
Attribute Selectors
We don't use Attributes selectors much, but if you want to select elements based on the attributes (In HTML attributes are special words that you used to control element behavior) you use element_name[attribute_name= "values | it's not mandatory if you want to go more detailed element selecting"]
a[class]{
color:#0a0a0a;
}
This will select all tags which have any class.
a[class="link"]{
color:#2860fb;
}
This will select tags that have a class of links. If you want to go more in-depth you can this out MDN
Group Selector
Above this were all basic selectors, but what if you want to apply the same style to multiple elements. I know you don't want to repeat the so here is the grouping selectors that let you apply a style to multiple elements just using a simple comma( , ) *. It is also known as Selector List .
a,li{
color:#2a65ff;
}
This will select all the a and li tags and apply color to it.
Now we will move with the combinators selectors that will help you to combine two or more elements to select a nested or whichever element you want in the HTML document.
Combinators
Combinators are combining two elements to select elements (only two).
Descendant Combinator
Typically represented by a single space (" ").This combinator will help you to select all the directly or indirectly child elements. You can use more than two elements to select deep-down elements.
ul li{
list-style:none;
color:#555555;
}
This will select all the li elements which will have a parent of ul.
Child Combinator
This combinator use greater than sign ( > ) to select direct child of the parent element. You can use more than two elements just like the Descendant combinator.
ul > li{
list-style:none;
color:#555555;
}
This will strictly select li tag which has a parent of ul(not like descendant combinator).
General Sibling Combinator
This combinator use this sign ( ~ ) above tab key. It takes two selectors and select siblings (means brother and sister) to select all the below elements.
a ~ p{
list-style:none;
color:#555555;
}
this will select all the p elements below not in an element.
Adjacent sibling combinator
This combinator will select just the below element. You can use it like this (p + span) this will select the span tag which has the above element of p.
a + p{
list-style:none;
color:#555555;
}
Pseudo Selectors
Pseudo classes
Ths ( :) pseudo allows the selection of elements based on state information that is not contained in the document tree. This is an mdn documentation definition this actually means that you are selecting an element for events like hover, focus, or like first-child (these things doesn't contain in the document tree), etc. I will be listing commonly used classes.
- :hover
- :first-child
- :last-child
- :focus
- :required
- :disable
comment in down if you know more imp ones.
button:hover{
background:orange;
}
Pseudo Elements
It's a keyword added to a selector that lets you style a specific part of the selector elements. For example ::before and ::after tag.
Let's take an example where you need a dot in every div element. So you will use::before the element
div::before{
content: "";
display:block;
width:4px;
height:4px;
border-radius:50%;
border:none;
background:#000000;
}
content and display are very important before keywords. If you want to read more here the Link