The pseudo-class mutability represents elements whose contents is user-alterable or not. :read-only represents the biggest part of a site: the non-alterable content. :read-write represents input elements which are user-alterable or with the in HTML5 newly introduced contenteditable attribute which allows the user to edit content.
# Syntax
:read-only {
/* declarations */
}
:read-write {
/* declarations */
}
# Example
:read-only {
font-family: Verdana, Arial, sans-serif;
}
:read-write {
font-family: Trebuchet MS, Times New Roman, sans-serif;
border: 1px dotted gray;
}
In the above mentioned code all non-alterable content is going to have the font Verdana, Arial, sans-serif while the editable inputs or contenteditable content is going to have a different font with a dotted gray border.
# Browser support
For future browser support information, also check out caniuse.com (Mutability pseudo-class).
# Usage statistics (Alexa Top 1,250,000 sites)
Due to an extreme price increase of our statistics provider the data collection was stopped in September 2018.