user-select
The user-select property in CSS controls how the text in an element is allowed to be selected. For example, it can be used to make text unselectable.
This is useful in situations where you want to provide an easier/cleaner copy-paste experience for users (not have them accidentally text-select useless things, like icons or images). However it’s a bit buggy. Firefox enforces the fact that any text matching that selector cannot be copied. WebKit still allows the text to be copied if you select elements around it. You can also use this to enforce that an entire element gets selection:
Here’s some demos of those: See the Pen user-select demo by Chris Coyier (@chriscoyier) on CodePen. There was no spec for this property for quite a while, but now is covered under CSS Basic User Interface Module Level 4. The default value is auto , which makes selection happen normally as you expect. “Normally” is a bit complicated. It’s worth quoting from the spec here:
- On the ::before and ::after pseudo elements, the computed value is none
- If the element is an editable element, the computed value is contain
- Otherwise, if the computed value of user-select on the parent of this element is all , the computed value is all
- Otherwise, if the computed value of user-select on the parent of this element is none , the computed value is none
- Otherwise, the computed value is text
In other words, it intelligently cascades and resets to a sensical state. It looks like maybe this feature could be used to make pseudo elements selectable, but no final word yet.
Firefox supports -moz-none , which is just like none except that it means sub-elements can override the cascade and become selectable again with -moz-user-select: text; As of Firefox 21, none behaves like -moz-none .
Internet Explorer also supports a so-far-proprietary value, element , in which you can select text inside the element but the selection will stop at the bounds of that element.
This is specifically for -*-user-select: none;
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Mobile / Tablet
CSS selectors
In CSS, selectors are used to target the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles we’ll run through the different types in great detail, seeing how they work.
| Prerequisites: | Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.) |
|---|---|
| Objective: | To learn how CSS selectors work in detail. |
What is a selector?
A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. The element or elements which are selected by the selector are referred to as the subject of the selector.
In other articles you may have met some different selectors, and learned that there are selectors that target the document in different ways — for example by selecting an element such as h1 , or a class such as .special .
In CSS, selectors are defined in the CSS Selectors specification; like any other part of CSS they need to have support in browsers for them to work. The majority of selectors that you will come across are defined in the Level 3 Selectors specification and Level 4 Selectors specification, which are both mature specifications, therefore you will find excellent browser support for these selectors.
Selector lists
If you have more than one thing which uses the same CSS then the individual selectors can be combined into a selector list so that the rule is applied to all of the individual selectors. For example, if I have the same CSS for an h1 and also a class of .special , I could write this as two separate rules.
h1 color: blue; > .special color: blue; > I could also combine these into a selector list, by adding a comma between them.
White space is valid before or after the comma. You may also find the selectors more readable if each is on a new line.
In the live example below try combining the two selectors which have identical declarations. The visual display should be the same after combining them.
When you group selectors in this way, if any selector is syntactically invalid, the whole rule will be ignored.
In the following example, the invalid class selector rule will be ignored, whereas the h1 would still be styled.
h1 color: blue; > ..special color: blue; > When combined however, neither the h1 nor the class will be styled as the entire rule is deemed invalid.
Types of selectors
There are a few different groupings of selectors, and knowing which type of selector you might need will help you to find the right tool for the job. In this article’s subarticles we will look at the different groups of selectors in more detail.
Type, class, and ID selectors
This group includes selectors that target an HTML element such as an .
It also includes selectors which target a class: