Making specific questions exceptions to the CSS rule | XM Community
Skip to main content

Hi! I want to style the 6th option of all Multiple Choice questions. For this I have the following CSS code which works fine:

/* make the sixth option in all multiple choice questions gray */
td.LabelContainer:nth-child(6) label {
    background-color: #BEBEBE;
    color: #ffffff;
}

td.LabelContainer:nth-child(6) label input:checked ~ span {
    background-color: #30B3AF !important;
}

However, now I need to make 2 questions exceptions to this rule. Among others the NPS question, which is also MC. I tried to add the following code, but it's not working because it makes the background of the 6th option white.

/* exceptions for QID9 and QID10 */
#QID9 td.LabelContainer:nth-child(6) label,
#QID10 td.LabelContainer:nth-child(6) label {
    background-color: inherit;
    color: inherit;
}

#QID9 td.LabelContainer:nth-child(6) label input:checked ~ span,
#QID10 td.LabelContainer:nth-child(6) label input:checked ~ span {
    background-color: #30B3AF !important;
}

Then I tried to just give the exceptions directly the default colors, which works for the background color and hover, but not for the selecting. When the respondent has chosen the option, the color needs to stay #30B3AF (the primary color)

/* exceptions for QID9 and QID10 */
#QID9 td.LabelContainer:nth-child(6) label,
#QID10 td.LabelContainer:nth-child(6) label {
    background-color: #F0F0F0;
}

#QID9 td.LabelContainer:nth-child(6) label:hover,
#QID10 td.LabelContainer:nth-child(6) label:hover {
    background-color: #E3E3E3;
}

#QID9 td.LabelContainer:nth-child(6) label input:checked ~ span,
#QID10 td.LabelContainer:nth-child(6) label input:checked ~ span {
    background-color: #30B3AF !important;
}

Solutions?

Found my own mistake: “.q-checked” instead of  “label input:checked ~ span”

/* make the sixth option in all multiple choice questions gray */
td.LabelContainer:nth-child(6) label {
    background-color: #BEBEBE;
    color: #ffffff;
}

td.LabelContainer:nth-child(6) .q-checked {
    background-color: #30B3AF !important;
}

/* exceptions for QID9 and QID10 */
#QID9 td.LabelContainer:nth-child(6) label {
    background-color: #F0F0F0;
    color: inherit;
#QID10 td.LabelContainer:nth-child(6) label {
    background-color: #F0F0F0;
}

#QID9 td.LabelContainer:nth-child(6) label:hover,
#QID10 td.LabelContainer:nth-child(6) label:hover {
    background-color: #E3E3E3;
}

#QID9 td.LabelContainer:nth-child(6) .q-checked,
#QID10 td.LabelContainer:nth-child(6) .q-checked {
    background-color: #30B3AF !important;
}

 

Leave a Reply


Terms & Conditions