Its about Css selectors.
According to you which ones are most important css selectors every developer should know?
I have listed my top 20 css selectors apart from the basic ones.
1. A + B
CODE
div + span{
color:orange;
}
color:orange;
}
This will only select the elements those are placed immediately after(not inside) the first element.
2. A > B
CODE
div > p{
background:#000;
color:#fff;
}
background:#000;
color:#fff;
}
This is called child selector, it selects all elements those are direct children of a specified element.
3. A[attribute]
CODE
input[type="email"]{
border:1px solid green;
}
border:1px solid green;
}
This is an example of attribute selector, this selects elements with specified attribute.
4. A:checked
CODE
input:checked + label{
color:orange;
}
color:orange;
}
This is a css3 pseudo class, it only targets elements those are checked. Keep in mind it only works with radio buttons and checkboxes.
5. A:disabled
CODE
input[type="email"]:disabled {
background: #dddddd;
}
background: #dddddd;
}
This is a another css3 pseudo class, this selector targets every disabled element. This selector mainly used in styling forms.
6. A:required
CODE
input:required{
border:1px solid blue;
}
border:1px solid blue;
}
This selector selects elements which are marked as required in form.
7. A:valid
CODE
input:valid{
border:1px solid green;
}
border:1px solid green;
}
:valid selector selects elements with validated value as per its elements settings. This works mainly with email field, input with max and min attributes or with number fields.
8. A:invalid
CODE
input:invalid{
border:1px solid red;
}
border:1px solid red;
}
:invalid selector works exactly opposite of how :valid selector works.
9. A:after
CODE
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
Some of the most common use of these selectors are for clearfix, using quotes in blockquotes etc. You are free to brainstorm your own creative ways to use it.
10. A:target
CODE
p:target {
background-color: #333;
color: #fff;
}
background-color: #333;
color: #fff;
}
This is a useful selector when you want to style the current active target element.
11. A:not(selector)
CODE
.entry-content :not(div){
border:1px solid #ccc;
color:red;
}
border:1px solid #ccc;
color:red;
}
:not(selector) targets every element which doesn’t match the specified element/selector. Its useful when you want target all elements except one particular element.
12. A::text related pseudo elements
CODE
p::first-line {
background-color: ##2B7EE3;
}
p::first-letter {
font-size: 1.5em;
color: #2B7EE3;
}
background-color: ##2B7EE3;
}
p::first-letter {
font-size: 1.5em;
color: #2B7EE3;
}
These selectors can only be used with block-level elements.
13. A:first-child
CODE
li:first-child{
font-weight:bold;
}
font-weight:bold;
}
This is very useful when you want to style the first item in a list.
14. A:last-child
CODE
li:last-child{
border-bottom:none;
}
border-bottom:none;
}
Similar to :first-child selector :last-child allow you to select the last element of its parent.
15. A:nth-child()
CODE
ul li:nth-child(2n+2){
color:green;
}
color:green;
}
:nth-child selector allows you to select one or multiple elements of any type, of its parent. Days are gone when you can’t select an element of a list without a class or an id but you can now do that easily with proper use of :nth-child selector.
16. A:nth-of-type()
CODE
div img:nth-of-type(3n) {
border: 1px solid red;
}
border: 1px solid red;
}
This selector works like :nth-child but it selects elements of a particular type of its parent.
Say you have a list where you have number of paragraph and a number of images, you want to target every third image in that list, here you can use :nth-of-type.
17. A:first-of-type()
CODE
p:first-of-type {
background: green;
}
background: green;
}
The :first-of-type selector selects the first element of a particular type of its parent.
18. A:last-of-type()
CODE
p:last-of-type {
background: green;
}
background: green;
}
Similar to :first-of-type :last-of-type selects the last element of a particular type of its parent.
19. A:nth-last-of-type()
CODE
div img:nth-last-of-type(3n) {
border: 1px solid red;
}
border: 1px solid red;
}
This work similarly as :nth-of-type only difference is that it starts counting from last child.
20. A:nth-last-child()
CODE
ul li:nth-last-child(2n+2){
color:green;
}
color:green;
}
This work similarly as :nth-child but it starts counting from last child.
Have I missed any important selectors here that you know and use? Do share your opinion.
