Skip to content

Instantly share code, notes, and snippets.

@NicoHood

NicoHood/tab.html

Last active Sep 3, 2020
Embed
What would you like to do?
Pure CSS Tabs without javascript and anchor support
<!-- Features:
* Tabs with anchor (browser history support)
* Tab anchor can be used to scroll or not
* Color selected tab menu
* Select the first tab by default (and also color its tab menu)
* Uses a simple unordered list
Helpful links:
https://stackoverflow.com/questions/6906724/is-it-possible-to-have-tabs-without-javascript
https://www.sitepoint.com/css3-tabs-using-target-selector/
https://stackoverflow.com/questions/43978381/keep-selected-tab-highlighted-in-menu-using-css
-->
<a href="#cat">Show cat</a>
<a href="#dog">Show dog</a>
<a href="#cow">Show cow</a>
<article id="tabs">
<!-- NOTE: This list of IDs MUST be placed BEFORE the tab-sections!
The order here is important too!
The ids and anchors MUST be the first element RIGHT AFTER then "tabs" id.-->
<div id="show-cat" class="tab-id"></div>
<div id="show-dog" class="tab-id"></div>
<div id="show-cow" class="tab-id"></div>
<div id="cat" class="tab-anchor"></div>
<div id="dog" class="tab-anchor"></div>
<div id="cow" class="tab-anchor"></div>
<ul class="tab-menu">
<li class="tab-item"><a href="#show-cat">Cat</a></li>
<li class="tab-item"><a href="#show-dog">Dog</a></li>
<li class="tab-item"><a href="#show-cow">Cow</a></li>
</ul>
<div class="tab-folder">
<p class="tab-content">This content appears on tab 1.</p>
<p class="tab-content">This content appears on tab 2.</p>
<p class="tab-content">This content appears on tab 3.</p>
</div>
</article>
#tabs {
// NOTE: If you set the div elements to display none,
// the browser will not jump to that anchor after clicking a tab.
.tab-id {
display: none;
}
// Alternative, used when scrolling to tab is desired
.tab-anchor {
scroll-margin-top: 7rem;
scroll-snap-margin-top: 7rem; /* Safari and IOS */
}
// By default, all tab contents should be hidden
.tab-folder>.tab-content {
display: none;
}
// If no tab is selected, chose the first tab
.tab-id:nth-child(1):not(:target) + .tab-id:nth-child(2):not(:target) + .tab-id:nth-child(3):not(:target) + .tab-anchor:nth-child(3n + 1):not(:target) + .tab-anchor:nth-child(3n + 2):not(:target) + .tab-anchor:nth-child(3n + 3):not(:target) ~ .tab-folder>.tab-content:nth-child(1) {
display: block;
}
// Show tab content, whenever its corresponding ID is referenced.
.tab-id:nth-child(1):target ~ .tab-folder>.tab-content:nth-child(1),
.tab-anchor:nth-child(3n + 1):target ~ .tab-folder>.tab-content:nth-child(1) {
display:block;
}
.tab-id:nth-child(2):target ~ .tab-folder>.tab-content:nth-child(2),
.tab-anchor:nth-child(3n + 2):target ~ .tab-folder>.tab-content:nth-child(2) {
display:block;
}
.tab-id:nth-child(3):target ~ .tab-folder>.tab-content:nth-child(3),
.tab-anchor:nth-child(3n + 3):target ~ .tab-folder>.tab-content:nth-child(3) {
display:block;
}
// NOTE: This can be merged with the entry below, style the default tab always the same. But you can (optionally) style the unselected tab menu differently.
.tab-id:nth-child(1):not(:target) + .tab-id:nth-child(2):not(:target) + .tab-id:nth-child(3):not(:target) + .tab-anchor:nth-child(3n + 1):not(:target) + .tab-anchor:nth-child(3n + 2):not(:target) + .tab-anchor:nth-child(3n + 3):not(:target) ~ .tab-menu>.tab-item:nth-child(1) {
a {
color:green;
}
}
// Color the tab, that is currently referenced to.
.tab-id:nth-child(1):target ~ .tab-menu>.tab-item:nth-child(1),
.tab-anchor:nth-child(3n + 1):target ~ .tab-menu>.tab-item:nth-child(1) {
a {
color:red;
}
}
.tab-id:nth-child(2):target ~ .tab-menu>.tab-item:nth-child(2),
.tab-anchor:nth-child(3n + 2):target ~ .tab-menu>.tab-item:nth-child(2) {
a {
color:red;
}
}
.tab-id:nth-child(3):target ~ .tab-menu>.tab-item:nth-child(3),
.tab-anchor:nth-child(3n + 3):target ~ .tab-menu>.tab-item:nth-child(3) {
a {
color:red;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.