After thoroughly reviewing your post and comments, it appears that you are attempting to transform a specific paragraph into a popup by enabling it to be scrollable while concealing all other content on the page.
Additionally, it seems that you are utilizing in-line styling rather than a CSS StyleSheet, and there is no mention of JavaScript in your approach.
Solution:
In response to your inquiry about achieving this solely with HTML and CSS, it is unlikely due to the inability to dynamically manipulate one HTML element directly from another. While inheritance could potentially serve as a workaround, if successful, it would likely result in a messy solution unsuitable for modern web development practices.
Furthermore, the use of Pseudo-selectors mentioned in your comments cannot be applied with inline styling. These selectors alter the displayed HTML of a specific element and its children but do not impact all elements on the page unless the said element serves as the top-level element.
To propose a solution, I recommend incorporating HTML5, CSS, and JavaScript to implement a "Burn and Re-build" structure commonly found in Single-Page Applications, directing users through different website sections via hidden content with selective display.
Various approaches exist to achieve this goal, typically beginning with JavaScript EventListeners and progressing to advanced tools like jQuery, Angular, or React for efficient updates to the DOM. While these methods provide the necessary resources, accomplishing your objective purely with HTML and inline styling may prove challenging.
Note:
One effective method to achieve your desired outcome involves utilizing HTML5, CSS, and JavaScript EventListeners. Start by defining two distinct styling classes in your CSS: '.show' and '.hide'.
.show {
visibility: visible;
}
.hide {
visibility: hidden;
}
Instead of using display properties, favor visibility to control an element's visibility without affecting layout integrity, ensuring consistent formatting within your classes. Applying these classes to HTML tags will toggle their visibility alongside child elements.
Although eliminating the .hide class rather than toggling to .show alone can automatically reset visibility, employing both ensures clearer commands and differentiation when modifying previously concealed elements. Prioritize visibility over display to preserve positioning stability during manipulation.
Subsequently, craft a function triggered upon clicking a designated button to handle essential operations:
- Retrieve a collection of target elements for hide/show actions.
- Cycle through the collection to appropriately manage element visibility.
Once the function is established, attach an EventListener to the button for seamless function invocation upon clicks!
The following code snippet offers guidance and insight, hoping to facilitate your implementation!
JavaScript, CSS, and HTML5 code:
// JavaScript function for handling popup visibility
'use strict'
// Boolean tracker for popup status
let hidden = false
// Function called on button click to manage popup behavior
let showPopup = function() {
// Retrieving child elements under 'main' tag
let main = document.getElementById('main').children
if (!hidden) { // Hides everything except popup
for (let i = 0; i < main.length; i++) {
if (main[i].id !== "popup") {
main[i].classList.remove('show')
main[i].classList.add('hide')
} else {
main[i].classList.add('popup-para')
}
}
hidden = !hidden
} else { // Reveals all hidden elements
for (let i = 0; i < main.length; i++) {
main[i].classList.remove('hide')
main[i].classList.remove('popup-para')
main[i].classList.add('show')
}
hidden = !hidden
}
console.log(document.getElementById('test-para').classList)
}
document.getElementById('popup-button').onclick = showPopup
.show {
visibility: visible;
}
.hide {
visibility: hidden;
}
.class-1 {
color: purple;
}
.c1 {
height: 10%;
width: 60%;
}
.popup-para {
max-height: 10em;
font-family: Verdana;
font-size: 32px;
overflow: scroll;
color: darkblue;
}
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<main id="main">
<h1> This is the main page content </h1>
<ol>
<li> Here's a list item. </li>
<li> Here's anotha! </li>
</ol>
<p> Your button is just after this paragraph </p>
<div id="popup">
<button id="popup-button" class="c1 c2 c3 c4">Click to hide or show all other sections</button>
<p> This is the paragarah that you want to look like it has popped up. I also have it changing it's text color let it stand out more! Also notice that it has kept the same position on the page and didn't jump up to the top. This is because we changed
the visibility of all the other elements as opposed to the display! They still maintain their positioning and flow!
<p> This paragrah shows up too because it is inside the popup div! Trying to fill space here, too lazy to get the Ipsum. Let's breakdown the JavaScript document object a bit. When we say document.getElementById('main') we are saying, "Hey, go look
at the entire HTML5 file, document, and get me each element that has an id of 'main', .getElementById('main'), then store those children into the variable 'main' as an array!" Since each id is unique, there can only be one thing that is returned
when we call .getElementById(). If you happen to have two elements in your HTML that have the same id, then only the first one will get returned. What is returned is actually called an Element object. Since it is an object, it also has properties!
One of those properties is called children and since an element can possibly have multiple children, it will return an array! Each item in that array is another Element object that references that specific element in the HTML file! Should have
got the lorem... </p>
</div>
<p id="test-para" class="class-1 class-2 class-3">This color stays purple because of precedence! </p>
<p> This doesn't though..</p>
<h1> "DON'T FORGET ABOUT ME!!"</h1>
<ul>
<li> These list elements are still in position</li>
<li> tada</li>
</ul>
</main>
</body>
<script src="index.js"></script>
</html>