CODEWITHSUNDEEP
htmlcsscss-selectors
Danil Shaykhutdinov
Danil Shaykhutdinov

Reputation: 2287

Change css classes for specified id only

I try to override some basic classes of complex control (dxList) DevExtreme, and it's work fine.

.dx-loadpanel-content {
    transform: translate(0px, 0px) !important;
    margin: auto !important;
    left: 0px !important;
    top: 0px !important;
    position: absolute !important;
}

.dx-scrollview-loadpanel {
    transform: translate(0px, 0px) !important;
    margin: auto !important;
    left: 50% !important;
    top: 50% !important;
    position: absolute !important;
}

but it's not good idea for me, because this classes are already used on different html pages.

I want override this classes only for specified dxList by some id. Like this:

#activitiesList .dx-loadpanel-content {
    transform: translate(0px, 0px) !important;
    margin: auto !important;
    left: 0px !important;
    top: 0px !important;
    position: absolute !important;
}

#activitiesList .dx-scrollview-loadpanel {
    transform: translate(0px, 0px) !important;
    margin: auto !important;
    left: 50% !important;
    top: 50% !important;
    position: absolute !important;
}

but it takes no effect. whats wrong?

Upvotes: 4

Views: 9373

Answers (2)

blackandorangecat
blackandorangecat

Reputation: 1344

If the ID and class belong to the same element, you need to remove the space between the two in the CSS.

If there is a space, the CSS will find all elements matching the first part of the selector, then look INSIDE those elements for elements matching the second part of the selector.

If there is no space, the CSS will find all elements that have the first part of the selector AND the second part of the selector (eg. matching ID and Class).

Take a look at the code below. Hope this helps.

/* Target all elements with the Class of 'c' that are inside elements with the ID of 'i' */
#i .c {
  background: red;
}


/*Target all elements with the ID of 'i' AND the Class of 'c'*/

#i.c {
  background: yellow;
}
<div id='i'>
  <div class='c'>
    ID and Class on different divs. Space in CSS.
  </div>
  <div class='b'>
    This is not targeted because class b was not selected in CSS
  </div>
</div>

<div id='i' class='c'>
  ID and Class on the same div. No space in CSS.
</div>

Upvotes: 10

RemyaJ
RemyaJ

Reputation: 5526

Is the class and id on the same element? Then remove the space between them like #myid.myclass if the class is for a child element inside your element that has the id use the space between them. Hope this helps you.

Upvotes: 3

Related Questions