P.S.
P.S.

Reputation: 16384

How to get ::before element of DOM via CSS (CSS3)?

I'm trying to get the element and set some styles to it, but it's my first time and I can't achieve it. I also can't set id or class to the element, because it's dynamically generated. I'm searching for the easiest solution and believe, that you guys will help me with this simple question.

enter image description here

Here is my HTML:

<md-list class="no-paddings" flex="100">
    <md-list-item flex="100" ng-repeat="adGroup in adsGroupsAndKeywords track by $index">
        <md-menu>
            <div layout="row" layout-align="space-between center">
                <div ng-click="AdsGroupsCtrl.openMenu($mdOpenMenu, $event)">
                    <h6>
                        {{ adGroup.name }}
                    </h6>
                    <md-chips
                            ng-click="call($event)"
                            md-on-remove="AdsGroupsCtrl.removeKeywordFromGroupOfAds($chip);"
                            ng-model="adGroup.keywords"
                            readonly="true"
                            md-removable="true">
                        <md-chip-template>
                            <em>{{$chip.keyword}}</em>
                        </md-chip-template>
                    </md-chips>
                    <md-divider></md-divider>
                </div>
            </div>
            <md-menu-content width="4">
                <md-menu-item>
                    <md-button ng-click="AdsGroupsCtrl.addToCurrentGroup($index)">
                        Добавить в данную группу
                    </md-button>
                </md-menu-item>
                <md-menu-item>
                    <md-button
                        ui-sref="app.expansionOfSemantics.adsList(
                            {
                                campaignsId: capmpaignId,
                                adId: adsGroupsAndKeywords[$index].id,
                                regionIds: adsGroupsAndKeywords[$index].regionIds,
                                keywords: keywords
                        })">
                        Сознать новую группу на основе текущей
                    </md-button>
                </md-menu-item>
            </md-menu-content>
        </md-menu>
    </md-list-item>
</md-list>

Thanks in advance

Upvotes: 0

Views: 103

Answers (1)

Ape
Ape

Reputation: 58

From your code I am not certain which your pseudo-element is. But in general you select pseudo-elements with ::before and ::after. The pseudo-elements are created by the content-property, the ::before and ::after pseudo-selectors as the name implies just select the location.

::before{...} or ::after{...}

(select all pseudo elements on the website that are located as first or last child inside their parent element respectively)

.className::before{...}

(selects the pseudo-element that is located as first child inside the element with the class="className")

.className::before{content: '';}

(::before selects the first spot inside the element with the class="className" but its the content-property that creates the pseuod-element)

Upvotes: 1

Related Questions