Menu
Community /Pin to ProfileBookmark
@cootheadMay 26.2017 — #Hi there JRMKER,
[indent]
you need a different mindset when using the [i]"em unit"[/i]
with respect to it's child elements. ?
Setting a child element's font-size to 1em in the CSS,
is to give it the the same size as that of it's parent
In your code example the [i]font-size[/i] requirement of the
child element is 4/5ths of it's parent's [i]font-size[/i].
This means that it should be set to [i]font-size: 0.8em[/i].
This example may help...
[/indent]
[i]coothead[/i]
Font size change
In the following FAQ code,
why does the font size not get changed in the ‘.ans’ class display?
I have the ‘.faq’ class font size set larger than the ‘.ans’ font size,
but it appears that the ‘.ans’ class inherits the larger setting.
Is that as expected or what am I doing wrong to have
the answer font size smaller than the question font size.
[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title> css FAQ </title>
<style>
p { color: black; }
div.faq { margin-top: 1em; cursor: pointer; font-size: 1.25em; }
.ans { font-size: 1em; color: red; }
.hide { display: none; }
</style>
</head>
<body>
<h1>FAQ Page (no nesting)</h1>
<div class=”faq”> FAQ 1 <div class=”hide ans”>Answer 1</div> </div>
<div class=”faq”> FAQ 2
<div class=”hide ans”>Answer 2
<p> <i>Additional</i> information about answer </p>
<p> <b>And even more</b> <i>additional</i> information about answer </p>
</div>
</div>
<div class=”faq”> FAQ 3 <div class=”hide ans”>Answer 3</div> </div>
<div class=”faq”> FAQ 4 <div class=”hide ans”>Answer 4</div> </div>
<div class=”faq”> FAQ 5 <div class=”hide ans”>Answer 5</div> </div>
<script>
function init() {
var sel = document.querySelectorAll(‘.faq’);
for (var i=0; i<sel.length; i++) {
sel[i].addEventListener(‘click’, function() { this.firstElementChild.classList.toggle(‘hide’); });
}
} init();
</script>
</body>
</html>
Sign in
to post a comment4 Comments(s) ↴
0
@cootheadMay 26.2017 — #Hi there JRMKER,[indent]
you need a different mindset when using the [i]"em unit"[/i]
with respect to it's child elements. ?
Setting a child element's font-size to 1em in the CSS,
is to give it the the same size as that of it's parent
In your code example the [i]font-size[/i] requirement of the
child element is 4/5ths of it's parent's [i]font-size[/i].
This means that it should be set to [i]font-size: 0.8em[/i].
This example may help...
[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style media="screen">
body {
font: 1em/ 1.62em verdana ,arial, helvetica, sans-serif;
}
.test1, .test2 {
padding: 0.5em;
margin: 0.5em 0;
border: 0.062em solid #999;
font-size: 1.25em;
}
.test2 {
font-size: 0.8em;
}
#child {
font-size: 1em;
}
#child1 {
font-size: 0.8em
}
#child2 {
font-size: 1.25em
}
</style>
</head>
<body>
<div>This is font-size: 1em</div>
<div class="test1">
This is font-size: 1.25em
<div id="child">This child is font-size: 1.25em, because it is set to 1em</div>
</div>
<div class="test1">This is font-size: 1.25em
<div id="child1">This child is font-size: 1em, because it is set to 0.8em</div>
</div>
<div class="test2">This is font-size: 0.8em
<div id="child2">This child is font-size: 1em, because it is set to 1.25em</div>
</div>
</body>
</html>[/color][/indent]
[i]coothead[/i]