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

Merge pull request #25 from equinusocio/master

Browse Source 
Improve ::selection example and description
This commit is contained in:
Angelos Chalaris
2018-02-28 12:10:46 +02:00
committed by GitHub
parent 6c20c6c81e 76f6a77e22
commit 2dafd039ef
2 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -139,8 +139,12 @@
<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 {
background: red;
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">::selection {
background: aquamarine;
color: black;
}
.custom-text-selection::selection {
background: deeppink;
color: white;
}
</code></pre>
@ -150,16 +154,16 @@
</div>
<style>
.snippet-demo__custom-text-selection::selection {
background: red;
background: deeppink;
color: white;
}
.snippet-demo__custom-text-selection::-moz-selection {
background: red;
background: deeppink;
color: white;
}
</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> 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">

12
snippets/custom-text-selection.md
View File

@ -11,8 +11,12 @@ Changes the styling of text selection.
#### CSS
```css
::selection {
background: aquamarine;
color: black;
}
.custom-text-selection::selection {
background: red;
background: deeppink;
color: white;
}
```
@ -25,18 +29,18 @@ Changes the styling of text selection.
<style>
.snippet-demo__custom-text-selection::selection {
background: red;
background: deeppink;
color: white;
}
.snippet-demo__custom-text-selection::-moz-selection {
background: red;
background: deeppink;
color: white;
}
</style>
#### Explanation
`::selection` defines a pseudo selector on an element to style text within it when selected.
`::selection` 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.
#### Browser support