My simple Q&A page!

[admuh]

Hello everyone! I made a simple Q&A page with toggle functionality through JavaScript DOM. Here is the page at CodePen:

Randank Q&A

I learn it from 40 JavaScript Projects for Beginners – Easy Ideas to Get Started Coding JS: How to create a FAQ page and it really helped me to get code JS DOM to learn it.

I have one question, though. I just learned that when I toggle to add show class (visit the page for context) to parent-level element, the children are following the parent element as if the children elements were added show class (I checked the DOM in console and showed that the children are not added with the class).

Is this because of this kind CSS specifity? (SCSS preprocessor)

.show {
	.question-title {
		margin-bottom: 12px;
	}
	
	.answer {
		display: initial;	
	...
	}

---

If I am not wrong, that CSS can be read as .show .question-title { } and .show .answer { }.

[ilenia]

yeah, so that is applied only when there is a .show class, and only to its children

[admuh]

Thanks for the explanation! Just learned and now understand it