andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Improve ::selection example and description

Browse Source
This commit is contained in:
Mattia Astorino
2018-02-27 22:45:56 +01:00
parent c6543e1db8
commit e4a81702e0
8 changed files with 4189 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@ -139,16 +139,29 @@
<p>Changes the styling of text selection.</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;p class="custom-text-selection"&gt;Select some of this text.&lt;/p&gt;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.custom-text-selection::selection {
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">::selection {
background: aquamarine;
color: black;
}
.custom-text-selection::selection {
background: red;
color: white;
}
</code></pre>
<h4 data-type="Demo">Demo</h4>
<div class="snippet-demo">
<p class="snippet-demo__custom-text-selection">Select some of this text.</p>
<p>Global aquamarine selection color</p>
<p class="snippet-demo__custom-text-selection">Red selection color.</p>
</div>
<style>
::selection {
background: aquamarine;
color: black;
}
::-moz-selection {
background: aquamarine;
color: black;
}
.snippet-demo__custom-text-selection::selection {
background: red;
color: white;
@ -159,7 +172,8 @@
}
</style>
<h4 data-type="Explanation">Explanation</h4>
<p><code>::selection</code> defines a pseudo selector on an element to style text within it when selected.</p>
<p><code>::selection</code> and <code>::-moz-selection</code> defines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level,
to any selectable element.</p>
<h4 data-type="Browser support">Browser support</h4>
<div>
<div class="snippet__browser-support">