Change first child ::before style when .active - html

Question

I have a menu that looks like this: http://i.stack.imgur.com/beX6i.png
The little triangle is made using ::before. I need to make it change into the color of the hover when the first child of the submenu is active (has .active class that is added from js automatically)
What should the selector look like? something like .submenu a:first-child.active?
CSS:
.submenu{
z-index:10;
position:absolute;
display:none;
background:#2b2b2b;
}
.submenu a{
font-family:'Roboto Slab';
display:block;
color:white;
background:transparent;
text-decoration:none;
text-transform:uppercase;
line-height:58px;
padding-left:8px;
padding-right:8px;
font-weight:bold;
font-size:14px;
}
.submenu a:hover{
color:#fe4817;
display:block;
background-color:#3A3939;
}
.submenu a.active{
color:#fe4817;
background-color:#3A3939;
}
.submenu a:first-child:before,
.submenu a:first-child::before{
position:absolute;
top:-8px;
left:0;
content:' ';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #2b2b2b;
}
.submenu a:first-child:hover:before,
.submenu a:first-child:hover::before{
border-bottom: 15px solid #3A3939;
}

Answer 1

It's really hard to understand your question. But I think
.submenu a:first-of-type.active:before {
border-bottom-color:#3a3939;
}
should do the job. :first-of-type might be better than :first-child in this case since :first-child could either be a heading or something alike while :first-of-type only selects the first anchor. See Selector Reference for further information.
If that doesn't work and you can provide a fiddle I'll take another look at your problem.