组合div和span标记样式失败

Question

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.

Answer 1

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 .

Answer 2

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;
}