Как найти класс внутри псевдо-класса - PullRequest
Новая
       7

Как найти класс внутри псевдо-класса

0 голосов
/ 17 мая 2019

Я пытаюсь найти класс внутри псевдокласса, чтобы изменить свойство в зависимости от того, какой класс у него есть (по умолчанию или инвертировать).

МЕНЕЕ 

.callout {
    position: relative;
    float: left;
    padding: 20px;
    &.default {
        background: #f0f0f0;
        color: #333333;
    }
    &.invert {
        background: #333333;
        color: #f0f0f0;
    }
    &.right {
        float: right;
        &:after {
            right: 100%;
            top: 30px;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            border-width: 19px 19px 0px 30px;
            margin-top: -20px;

            //This is working now but can I change border-right-color depend on which class it has, default or invert.
            border-right-color: red;

            //This is the area I am struggling...
            .default & {
                border-right-color: #f0f0f0;
            }
            .invert & {
                border-right-color: #333333;
            }

        }

    }
}

HTML 

<div class="callout invert right">This is callout text... </div>

JS Fiddle

https://jsfiddle.net/kunjsharma/La68gnx7/2/

...