Why I can't change color on before pseudo element

Question

I created div element with mini caret, now div looks like tooltip, I have problem with changing color of caret on second div, I change background color but I want to change only of mini caret.

In CSS is what I tried to solve this problem.

Reference, in secong tooltip, class walter1 is imported, because, I don't want to copy all codes from walter1 to walter2.

JSFIDDLE: http://jsfiddle.net/hfgxzsnv/

Answer 1

The caret gets its color from the border not the background. You have to override this rule border-left: 13px solid #b2d4dd; from .walter1:before

You have to change border-color not background-color

Use

.walter2:before {    
  border-left-color: #dddddd;      
}

DEMO