Other Features
English
Help translate the survey →
Technologies

Units & Selectors

One of the reasons CSS is so tough to master is that even apparently small decisions can sometimes have big consequences. Should you size your fonts in ems or pixels? Which selector should you use? Is there a way to avoid having to use JavaScript to accomplish what you want?

Having a good grasp of units and selectors makes all these decisions, if not simple, at least a little easier.

Units

Completion Percentage: 99.55% (11266)
Completion Percentage: 99.55% (11266)
Percents%CountΣ

Which CSS units do developers use?

0%20%40%60%80%100%0%20%40%60%80%100%Percentage of Usersexinmmchcmvmin, vmaxptremvh, vwem%px6.2%7.8%8.3%8.7%38.9%41.1%85.7%90.4%92.5%96.5%99.1%

Pseudo-Elements

Completion Percentage: 98.56% (11154)
Completion Percentage: 98.56% (11154)
Percents%CountΣ

Which pseudo CSS selectors do developers use?

0%20%40%60%80%100%0%20%40%60%80%100%Percentage of Users::first-line::first-lette…::selection::placeholder::after::before28.4%39.8%43.5%66.4%97.7%97.7%

Combinators

Completion Percentage: 98.42% (11138)
Completion Percentage: 98.42% (11138)
Percents%CountΣ

Which combinations of CSS selectors do developers use?

0%20%40%60%80%100%0%20%40%60%80%100%Percentage of Usersdiv ~ div (su…div + div (ne…div > span (c…div span (des…61.5%78.8%95.3%96%

Tree & Document Structure

Completion Percentage: 98.31% (11126)
Completion Percentage: 98.31% (11126)
Percents%CountΣ

Which structure related CSS selectors do developers use?

0%20%40%60%80%100%0%20%40%60%80%100%Percentage of Users:lang():only-of-type:only-child:empty:nth-last-of-…:root:last-of-type:first-of-typ…:nth-last-chi…:nth-of-type(…:not():last-child:nth-child():first-child7.4%14.3%26.4%41%43.8%45.6%53.6%57.7%68.8%69.7%80.1%91.5%94%94.6%

Attributes

Completion Percentage: 91.54% (10360)
Completion Percentage: 91.54% (10360)
Percents%CountΣ

Which attributes CSS selectors do developers use?

0%20%40%60%80%100%0%20%40%60%80%100%Percentage of Usersdiv[foo$="bar…div[foo~="bar…div[foo*="bar…div[foo^="bar…div[foo] (Pre…div[foo="bar"…35%39.7%47.1%55.2%77%83.9%

Interaction

Completion Percentage: 99.34% (11242)
Completion Percentage: 99.34% (11242)
Percents%CountΣ

Which interaction CSS selectors do developers use?

0%20%40%60%80%100%0%20%40%60%80%100%Percentage of Users:focus-visibl…:focus-within:active:focus:hover10.8%16.7%95.3%96.2%99.2%

Form Controls

Completion Percentage: 90.45% (10236)
Completion Percentage: 90.45% (10236)
Percents%CountΣ

Which form related CSS selectors do developers use?

0%20%40%60%80%100%0%20%40%60%80%100%Percentage of Users:user-invalid:in-range and…:indeterminat…:placeholder-…:read-only an…:default:valid and :i…:required and…:enabled and …:checked6%14.5%18.7%20.4%34.7%37.5%62.8%82.5%

Recommended Resources

The Complete Design to Code Learning Path

Take a deep-dive into the essential features of CSS, while also exploring CSS features you probably didn’t even know existed!
Thanks to our partners for supporting us! Learn more.
« Previous: Other FeaturesNext: Technologies »