CODEWITHSUNDEEP
javascriptcssattributeslessselector
DisconnectYourNeighbours
DisconnectYourNeighbours

Reputation: 85

Accessing an empty attribute in less

I am using a less file to style my html elements and I am trying to access the input element with the attribute 'kendo-date-time-picker'.

The html is as follows:

<input kendo-date-time-picker
               ng-switch-when="dateTimePicker"
               k-ng-model="$parent.model"
               k-format="'HH:mm - dd.MM.yy'"
               k-time-Format="'HH:mm'"
               data-on-change="change()"
               data-ng-readonly="readonly"
               data-ng-disabled="disabled"
               data-ng-required="required"
               data-ng-focus="focus($event)"
               data-ng-blur="blur()"
               interval="15"
               />

And my less file looks like this at the moment:

& input[kendo-date-time-picker]{
    span{
        .slave{
            background: rgb(233, 231, 231) !important;
        }

        .k-picker-wrap.k-state-disabled{
            background-image: none !important;
            height: 30.3px;
            opacity: 1 !important;
            background: rgb(233, 231, 231) !important;
            border-width: 0px !important;
        }
    }
}

As far as I know, this should access any input elements with the attribute: 'kendo-date-time-picker', but it doesn't work.

Forget about the '&'- selector, this is nested in a different element. What am I doing wrong? Can somebody help me with this?

Greetings

Upvotes: 0

Views: 44

Answers (1)

James Donnelly
James Donnelly

Reputation: 128791

span elements are not allowed to be contained within input elements. Your browser is probably fixing this for you by moving the span element outside, so your markup will end up looking similar to:

<input ... />
<span> ... </span>

If you wish to select the span element directly after your [kendo-date-time-picker] element, you can use the Adjacent Sibling Combinator (+) selector:

input[kendo-date-time-picker] + span {
    ...
}

Upvotes: 2

Related Questions