There are two types of help text container I have. One is in <div>
other is in <span>
I wrote a css both in one style. It's working good but those <div>
and <spans>
includes an arrow styled child <div>
and <span>
. I tried to combine that .arrow
styles but it failed in practice. Is there a way combine those same styles?
HTML example for <div>
:
<div class="helptext" id="{{ id_for_label }}">
<div class="arrow"></div> Helptext is in here
</div>
HTML example for <span>
:
<span class="helptext" id="{{ id_for_label }}">
<span class="arrow"></span> Helptext is in here
</span>
CSS for both:
div[class="helptext"],span[class="helptext"] {
position: absolute;
display: none;
right: 15px;
margin-top: 3px;
padding: 10px;
border: 1px solid #3c578c;
background-color: #FCFCF0;
opacity: 0.9;
color: red;
border-radius: 5px;
box-shadow: 5px 5px 15px 1px dimgray;
text-align: justify;
font-size: 12px;
z-index:100000;
}
CSS .arrow example for <div>
:
div[class="helptext"] .arrow {display: block; position: absolute; border: 10px solid transparent;
border-bottom-color: #3c578c; top: -20px; right: 10px;}
CSS .arrow example for <span>
:
span[class="helptext"] .arrow {display: block; position: absolute; border: 10px solid transparent;
border-bottom-color: #3c578c; top: -20px; right: 10px;}
I can't combine last two css.
You are missing .arrow
in both selectors for your css
Use this
div[class="helptext"] .arrow,span[class="helptext"] .arrow{
position: absolute;
display: none;
right: 15px;
margin-top: 3px;
padding: 10px;
border: 1px solid #3c578c;
background-color: #FCFCF0;
opacity: 0.9;
color: red;
border-radius: 5px;
box-shadow: 5px 5px 15px 1px dimgray;
text-align: justify;
font-size: 12px;
z-index:100000;
}
I think you can .helptext .arrow
as selector, if you don't have another element with classname helptext
.
You should use below code:
.helptext {
position: absolute;
display: none;
right: 15px;
margin-top: 3px;
padding: 10px;
border: 1px solid #3c578c;
background-color: #FCFCF0;
opacity: 0.9;
color: red;
border-radius: 5px;
box-shadow: 5px 5px 15px 1px dimgray;
text-align: justify;
font-size: 12px;
z-index:100000;
}
.helptext .arrow {
display: block;
position: absolute;
border: 10px solid transparent;
border-bottom-color: #3c578c;
top: -20px;
right: 10px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.