phonedog365
Reputation: 69
CSS for changing display of targeted sections
I have a combined local docs, group docs, and f.a.q. page I've been collating my documentation into. It's turning out very well and is easily updated and added to. There's a static navbar at the top with drop-down menus to navigate to parts of the document. Ideally, I'd like to hide all content other than that which is currently linked.
CSS:
<style>
/* Block Elements */
body { margin-bottom: 150px; background-color: white; }
section { margin-left: 35px; }
/* Select/Display Elements */
section:not(#welcome) { display: none; }
section:target { display: block; }
...
</style>
I've also tried:
section:active { display: block; }
section:focus { display: block; }
I've also tried to add !important to the section:target { display: block !important; } without success. In a simpler page without additional CSS I can get it to work, but I can't seem to get it to work with my full styles.
Suggestions?
Edit: A sample that seems to work as I'd like albeit with divs and not sections:
<html>
<head>
<title> Test Target Selector </title>
<style>
div { display: none; }
div:target { display: block; }
</style>
</head>
<body>
<nav>
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
</nav>
<section>
<div id="1"> <h2> 1 </h2> <p> Content 1 </p> </div>
<div id="2"> <h2> 2 </h2> <p> Content 2 </p> </div>
<div id="3"> <h2> 3 </h2> <p> Content 3 </p> </div>
</section>
</body>
</html>
Edit2: Adding original full CSS and framework HTML.
<html>
<head>
<style>
/* Block Elements */
body { font-family: "Antic Slab", "Source Sans Pro", Helvetica, sans-serif; margin-bottom: 150px; background-color: white; }
section { margin-left: 35px; }
/* Select/Display Elements */
section:not(#welcome) { display: none; }
section:target { display: block; }
/* Block Elements Continued */
h1 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.4em; }
h2 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.3em; }
h3 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.2em; }
h4 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.1em; }
h5 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.0em; }
p { text-align: justify; font-size: 1.0em; margin-right: 50px; }
blockquote { margin: 15px 0 0 15px; margin-right: 50px; }
blockquote p { padding-left: 15px; margin-right: 50px; }
ol, ul, dl { margin: 15px 0 0 15px; margin-right: 50px; }
li { padding: 5px; }
dt { padding: 5px; font-weight: bold; float: left; }
dd { padding: 5px; }
img { display: none; border: 1px solid black; margin: 20px; padding: 0; width: 200px; }
/* Inline Elements */
a { text-decoration: none; color: blue; }
a:hover { color: cyan; }
code { font-family: monospace; font-size: 1.1em; }
cite { color: darkgray; font-style: italic; }
cite a { color: navy; }
cite a:hover { color: cyan; }
code { font-family: monospace; font-size: 1.10em; }
blockquote.email { margin: 25px; border-left: 1px solid lightgray; }
/* Classes */
.email { border-left: 1px solid gray; }
.lower-alpha { list-style-type: lower-alpha; }
.outdated { color: red; }
.indent { margin-left: 50px; }
.center { text-align: center; }
.indent { margin-left: 25px; }
.no-wrap { white-space: nowrap; }
.outdated { text-decoration: none; font-size: 0.9em; color: lightgray; }
/* Main Navigation */
nav ul { margin: 0 2px; position: fixed; top: 0; width: 100%; list-style: none; background-color: black; padding: 0; text-align: center; }
nav ul li { position: relative; float: left; color: white; background-color: black; display: inline-block; text-align: center; margin: 0; padding: 10px; font-size: 0.90em; }
nav ul li:before { content: ""; }
nav ul li a { color: white; margin: 0; padding: 10px; text-decoration: none; -webkit-transition: color 0.2s linear, background 0.2s linear; -moz-transition: color 0.2s linear, background 0.2s linear; -o-transition: color 0.2s linear, background 0.2s linear; transition: color 0.2s linear, background 0.2s linear; }
nav ul li a:hover { color: white; }
nav ul li:hover > a { background: black; }
/* Drop-Down Navigation */
nav ul li:hover > ul { visibility: visible; opacity: 1; }
nav ul ul, nav ul ul li ul { list-style: none; margin: 0; padding: 10px; visibility: hidden; opacity: 0; position: absolute; z-index: 99999; width: 180px; background: white; -webkit-transition: opacity 0.2s linear, visibility 0.2s linear; -moz-transition: opacity 0.2s linear, visibility 0.2s linear; -o-transition: opacity 0.2s linear, visibility 0.2s linear; transition: opacity 0.2s linear, visibility 0.2s linear; }
nav ul ul { top: 43px; left: 1px; }
nav ul ul li ul { top: 0; left: 181px; }
nav ul ul li { clear: both; width: 100%; border: 0 none; border-bottom: 1px solid #c9c9c9; }
nav ul ul li a { background: none; padding: 7px 15px; color: white; text-decoration: none; display: inline-block; border: 0 none; float: left; clear: both; width: 150px; }
/* Lists */
ul { margin: 25px; list-style-type: none; }
ul li { padding: 5px; font-size: 0.90em; text-align: justify; }
ul li:before { content: "\2022"; }
ol { margin: 25px; }
ol li { padding: 5px; font-size: 0.90em; text-align: justify; }
ol li.lower-alpha { list-style-type: lower-alpha; }
/* Tables */
table { margin: 25px 25px auto; border-collapse: collapse; }
table caption { margin: 25px 0 25px 0; text-align: left; color: gray; }
th, td { padding: 5px; border: 1px solid lightgray; vertical-align: center; }
th { font-size: 0.8em; font-weight: bold; text-align: center; }
td { font-size: 0.8em; text-align: justify; white-space: nowrap; }
td:hover { background-color: lightcyan; }
</style>
</head>
<body>
<nav>
<ul id="sitemap">
<li class="h1"> <a href="#site_doc">Site Doc</a>
<ul>
<li class="h2"> <a href="#backup">Backup</a> </li>
<li class="h2"> <a href="#data">Data</a> </li>
</ul>
</li>
<li class="h1"> <a href="#notes">Notes</a>
<ul>
<li class="h2"> <a href="#manual">Manual</a> </li>
</ul>
</li>
</ul>
</nav>
<section id="welcome">
<h1> Documentation Page </h1>
<p> Welcome to the documentation page. </p>
<p> This page is under development. </p>
</section>
<section id="site_doc">
<h1> Site Doc </h1>
<section id="backup">
<h2> Backup </h2>
<p> Backup procedures. </p>
</section>
<section id="data">
<h2> Data </h2>
<p> Data storage procedures. </p>
</section>
</section>
<section id="notes">
<h1> Notes </h1>
<section id="manual">
<h2> Manual </h2>
<p> Manual. </p>
</section>
</section>
</body>
</html>
Upvotes: 2
Views: 142
Answers (1)
Hugo G
Reputation: 16536
The only reason your simplified example didn't work is because you had all sections wrapped in yet another section. Replace that wrapper with something else and it will work. As for the more generic problem with your other CSS, there's two ways of approaching it: either find out which rules are mixing up your custom CSS, or add more specific rules, e.g. CSS classes to your toggable sections.
<html>
<head>
<title> Test Target Selector </title>
<style>
section { display: none; }
section:target { display: block; }
</style>
</head>
<body>
<nav>
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
</nav>
<div>
<section id="1"> <h2> 1 </h2> <p> Content 1 </p> </section>
<section id="2"> <h2> 2 </h2> <p> Content 2 </p> </section>
<section id="3"> <h2> 3 </h2> <p> Content 3 </p> </section>
</div>
</body>
</html>Upvotes: 2
Related Questions
- Targeting section element in CSS
- How to define a specific style for each page section?
- How to change a style in CSS such that it affects only code in a `section` or a `div`
- Styling two sections differently with the same CSS class
- HTML different Styles for two sections
- Section in HTML & CSS
- css - alternating section styling?
- How can I style a <section> when it is followed by another <section>?
- Working with <section> in CSS
- Applying CSS to specific section of page