Changing random css colour to background of one DIV and border-top-color of another

Question

I want to randomly (of a selected list) change the color of the background of my header which I've done and is working great, using this JS:

var bgcolorlist=new Array("#ef5c20", "#a7dbca", "#c5e53f", "#ffad14")

$(".cbp-hsinner").css("background-color",bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]);

but I want the same random color to apply to the 'border-top-color' of this a:after tag here:

.cbp-hsmenu > li.cbp-hsitem-open > a:after {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-top-color: #ef5c20;
border-width: 10px;
left: 50%;
margin-left: -10px;
}

HTML:

 <nav class="cbp-hsmenu-wrapper" id="cbp-hsmenu-wrapper">




                <div class="cbp-hsinner">

                 <div class="site-header__logo-alt"><a href="http://helloarchie.blue/"><img width="145" alt="Hello Archie" src="<?php echo theme_url('/img/HA-LOGO3.png'); ?>" /></a></div>

                    <ul class="cbp-hsmenu">

                    <li>
                            <a href="http://helloarchie.blue">Home</a>
                        </li>



                        <li>
                            <a href="#">Categories</a>
                            <ul class="cbp-hssubmenu">
                                <li><a href="http://helloarchie.blue/category/personal/"><span>Personal</span></a></li>
                            <li><a href="http://helloarchie.blue/category/monthly-updates/"><span>Monthly Updates</span></a></li>
                                <li><a href="http://helloarchie.blue/category/informative/"><span>Informative</span></a></li>
                                <li><a href="http://helloarchie.blue/category/reviews/"><span>Reviews</span></a></li>
                            <li><a href="http://helloarchie.blue/category/guides/"><span>Guides</span></a></li>
                            </ul>
                        </li>

                       <li>
                            <a href="http://helloarchie.blue/about">About</a>
                        </li>

                        <li>
                            <a href="#">Elsewhere</a>
                            <ul class="cbp-hssubmenu">
                                <li><a href="http://kaye.at/"><span>Portfolio</span></a></li>
                                <li><a href="http://kaye.at/baby/"><span>The Baby Project</span></a></li>

                            </ul>
                        </li>

                    </ul>
                </div>
            </nav>

Is this possible?

possible duplicate of [Access the css ":after" selector with jQuery](http://stackoverflow.com/questions/17788990/access-the-css-after-selector-with-jquery) — Markai, Nov 21 '14 at 11:54

score 0 · Answer 1 · edited May 23 '17 at 10:26

Create a variable of the color and then apply it to both css rules.

var bgcolorlist=new Array("#ef5c20", "#a7dbca", "#c5e53f", "#ffad14");
var rgb = bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)];
$(".cbp-hsinner").css("background-color",rgb);

This way you're only pulling the random color once and applying it to both places you want it. Other than that there is no way to set the border-top-color of one element to the background-color of another element directly in CSS. Since you can't access the :after directly in JS you will need to use one of the tecniques from this link to add the css the way you want.

Changing random css colour to background of one DIV and border-top-color of another

1 Answers1