Which are the most important css selectors? |
Which are the most important css selectors? |
Design The Way |
Oct 16 2016, 09:54 AM
Post
#1
|
Group: Members Posts: 4 Joined: 16-October 16 Member No.: 24,889 |
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 |
Oct 16 2016, 12:28 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
Yeah, you've missed all the basic ones.
|
Design The Way |
Oct 17 2016, 01:52 AM
Post
#3
|
Group: Members Posts: 4 Joined: 16-October 16 Member No.: 24,889 |
|
pandy |
Oct 17 2016, 06:55 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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 |
Oct 17 2016, 07:59 AM
Post
#5
|
Group: Members Posts: 4 Joined: 16-October 16 Member No.: 24,889 |
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 |
Oct 17 2016, 08:34 AM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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 |
Oct 17 2016, 07:31 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
Oct 18 2016, 01:35 AM
Post
#8
|
Group: Members Posts: 4 Joined: 16-October 16 Member No.: 24,889 |
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. |
Lo-Fi Version | Time is now: 26th April 2024 - 09:00 AM |