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

BIN
dist/527b39bfa5c417dbf84620127ec95368.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
dist/5f62c8cc1947e40c7e328854a3026c04.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

1056
dist/e5eecc0ff495d3dfb2c9cc2b763389dc.html vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1621
dist/f06fd0495a34430f242f7611190395d6.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1479
dist/f06fd0495a34430f242f7611190395d6.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1
dist/f06fd0495a34430f242f7611190395d6.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

20
index.html
View File

@ -139,16 +139,29 @@
<p>Changes the styling of text selection.</p> <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; <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> </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; background: red;
color: white; color: white;
} }
</code></pre> </code></pre>
<h4 data-type="Demo">Demo</h4> <h4 data-type="Demo">Demo</h4>
<div class="snippet-demo"> <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> </div>
<style> <style>
::selection {
background: aquamarine;
color: black;
}
::-moz-selection {
background: aquamarine;
color: black;
}
.snippet-demo__custom-text-selection::selection { .snippet-demo__custom-text-selection::selection {
background: red; background: red;
color: white; color: white;
@ -159,7 +172,8 @@
} }
</style> </style>
<h4 data-type="Explanation">Explanation</h4> <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> <h4 data-type="Browser support">Browser support</h4>
<div> <div>
<div class="snippet__browser-support"> <div class="snippet__browser-support">

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

@ -11,6 +11,10 @@ Changes the styling of text selection.
#### CSS #### CSS
```css ```css
::selection {
background: aquamarine;
color: black;
}
.custom-text-selection::selection { .custom-text-selection::selection {
background: red; background: red;
color: white; color: white;
@ -20,10 +24,19 @@ Changes the styling of text selection.
#### Demo #### Demo
<div class="snippet-demo"> <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> </div>
<style> <style>
::selection {
background: aquamarine;
color: black;
}
::-moz-selection {
background: aquamarine;
color: black;
}
.snippet-demo__custom-text-selection::selection { .snippet-demo__custom-text-selection::selection {
background: red; background: red;
color: white; color: white;
@ -36,7 +49,7 @@ Changes the styling of text selection.
#### Explanation #### Explanation
`::selection` defines a pseudo selector on an element to style text within it when selected. `::selection` and `::-moz-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 #### Browser support