How To Use CSS Selectors


Sometimes using the generic CSS classes of the member portal is not enough to apply a style because one or more special dynamic selectors are used to apply a certain style to an element.

How It Works


In this particular case, if we want to change the padding of the filter container by using the generic class MuiGrid-root, the change will not be applied, because it will be overridden by the higher specificity of the dynamic classes selector combination.

If you decide to raise specificity by using the classes MuiGrid-container and MuiGrid-item to create the following snippet, you will change the padding of all containers that have those classes:

.MuiGrid-root.MuiGrid-container.MuiGrid-item {
       padding: 1.6rem;

For such cases, we are providing ids to certain containers and elements, so that you may raise the specificity of the selector, and at the same time encapsulate your changes to a particular part of the application layout. In the example above, the following code will result in a change of the padding of the filter container only:

#side-filter {
      padding: 1.6rem;


Note: We do not use id selectors in default stylesheets. These are provided for easy customization of styles, so adding an id selector to a class or tag will always result in higher specificity and hence will override the default style.
Important: The use of the !important keyword is considered bad practice and we generally refrain from using it. There may be rare cases where it is used to override a complex selector style of a third party library. In such cases, you might want to use a combination with an id selector to override the default !important: style with your own !important statement. Bear in mind that default styles where the !important: keyword is present are most likely temporary solutions to complex problems and the default style may change at any time without notice.
Was this article helpful?
0 out of 0 found this helpful



Please sign in to leave a comment.