XF 2.2 How to target specific custom thread field via CSS?

[sbj]

I try to style a specific custom thread fields. I can't find out what CSS to use to target specific fields.

Tried so far:

[data-field="my_field"]
{
    >.pairs > dd
    {
        background: red;
    }
}

But it doesn't work. Tried other variations but no luck so far.

Anybody could help?

 

[Paul B]

.formRow[data-field="test"] > dd
{
    background: red;
}

 

[sbj]

.formRow[data-field="test"] > dd
{
    background: red;
}

Thanks, doesn't work unfortunately. It maybe because I am using the thread status block to display the fields.

 

[Paul B]

That works in the thread creation view.

Which view are you trying to style it in and which specific section are you targeting?

Edit: I see now - give me a minute, I'm making ciabatta.

 

[Paul B]

This should work for all thread view types, regardless of the exact template name:

[data-template*="thread_view"]
{
    .pairs[data-field="test"] > dd
    {
        background: red;
    }
}

Replace test with the name of the custom thread field.

 

[sbj]

This should work for all thread view types, regardless of the exact template name:

[data-template*="thread_view"]
{
    .pairs[data-field="test"] > dd
    {
        background: red;
    }
}

Boom, it works. Thanks. I still can't get around these css classes. Like brackets, dots, arrows. Never sure which one to use when and in what order.