CSS is not overriding the theme

Hi,


I am trying to apply word-wrap for the following css but it doesn't work.

Not sure what I am missing when it comes to Desktop, class hierarchy.

.desktop.ContactList.TableRecords .TableRecords_EvenLine, .desktop.ContactList.TableRecords .TableRecords_OddLine{
    word-wrap: break-word !important;        /* Internet Explorer 5.5+ */
    word-break: break-all !important;
    white-space: normal !important;
}

This is my css code to override the default theme and apply. Have attached the source from Dev tool.

Appreciate your help.


Thanks and Regards,

Ramya S

Solution

Hi, you need to learn about CSS selectors.

.desktop.ContactList.TableRecords : this selector is saying select the html elements that have desktop + ContactList + TableRecords classes at the same time.

Since the desktop class is actually only on the parent div, you want to select children of that div, which means having a space between .desktop and the rest of the selector, so:

.desktop .ContactList.TableRecords


Read more about CSS syntax here:

https://www.w3schools.com/cssref/css_selectors.asp

Solution

Afonso Aguas wrote:

Hi, you need to learn about CSS selectors.

.desktop.ContactList.TableRecords : this selector is saying select the html elements that have desktop + ContactList + TableRecords classes at the same time.

Since the desktop class is actually only on the parent div, you want to select children of that div, which means having a space between .desktop and the rest of the selector, so:

.desktop .ContactList.TableRecords


Read more about CSS syntax here:

https://www.w3schools.com/cssref/css_selectors.asp

Thank you, Afonso Aguas for the w3schools link.
I tried to implement as per the parent and child hierarchy and it worked.