How To Use CSS Selectors

Author: Blago

Last Updated: March 14, 2023 15:59

Introduction

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.

Before we dive into detail, make sure to read more about Member Portal Custom Code.
Customizing the member portal is only available with the Premium Apps Package.

How It Works

Screenshot_2020-06-29_at_17.51.16.png

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.