Which are the most important css selectors? Options

[Design The Way]

Hey I recently posted this article at @designtheway but wanted to share a short version with my fellow forum members.

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;
}

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;
}

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;
}

This is an example of attribute selector, this selects elements with specified attribute.

4. A:checked

CODE

input:checked + label{
  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;
}

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;
}

This selector selects elements which are marked as required in form.

7. A:valid

CODE

input:valid{
  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;
}

: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;
}

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;
}

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;
}

: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;
}

These selectors can only be used with block-level elements.

13. A:first-child

CODE

li:first-child{
  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;
}

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;
}

: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;
}

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;
}

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;
}

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;
}

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;
}

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.

[pandy]

Yeah, you've missed all the basic ones.

[Design The Way]

Yeah, you've missed all the basic ones.

Thanks for looking into it but you may have missed this line in the post

"I have listed my top 20 css selectors apart from the basic ones."

Hope it clarifies.

[pandy]

Yes, I did. Sorry. So what makes those 20 the most important and what selectors did you exclude (except basic ones) and why?

[Design The Way]

Yes, I did. Sorry. So what makes those 20 the most important and what selectors did you exclude (except basic ones) and why?

See as a front end developer over the years I have found theses 20 selectors very useful to my work flow that doesn't mean other selectors are not important or useless.
I listed these as my most useful selectors and think others who doesn't use these should use it.
As far as the ones I have excluded there is a whole list of it. check this CSS Selector Reference
But which one do you find very useful?

[pandy]

Most, not to say all of them. I'm guess I'm trying to say I don't see the point of a list like this. I do see the point of your post though.

[Christian J]

Hey I recently posted this article at @designtheway

Normally we delete threadstarts copied from other sites. If you want feedback on the linked page, we could move the thread to the Site Review Requests subforum.

[Design The Way]

Hey I recently posted this article at @designtheway

Normally we delete threadstarts copied from other sites. If you want feedback on the linked page, we could move the thread to the Site Review Requests subforum.

If posting something own from other site is not allowed here, then I apologies for that. As far as getting feedback is concerned I posted this to find out what other forum members think of important css selectors, if you think moving it to Site Review Requests subforum will be appropriate one then please do so.