XF 2.2 Is there any way to contract this repetitive syntax?

[securedme]

[data-template="forum_view"][data-container-key='node-19']  .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}
[data-template="forum_view"][data-container-key='node-12']  .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}
[data-template="forum_view"][data-container-key='node-11']  .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}
[data-template="forum_view"][data-container-key='node-49']  .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}
[data-template="forum_view"][data-container-key='node-17']  .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}
[data-template="forum_view"][data-container-key='node-39']  .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}

And would there be any difference in terms of script execution for expanded and contracted syntax? Thanks.

 

[Paul B]

This should work:

[data-template="forum_view"][data-container-key='node-19'],[data-container-key='node-12'],[data-container-key='node-11'],[data-container-key='node-49'],[data-container-key='node-17'],[data-container-key='node-39']  .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}

There won't be any difference in performance.

 

[securedme]

Thanks. I followed your instruction and found the following doesn't work (padding not added) except for node-5:

[data-template="forum_view"]
[data-container-key='node-1'],
[data-container-key='node-2'],
[data-container-key='node-3'],
[data-container-key='node-4'],
[data-container-key='node-5'] .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}

But this (another part) works though:

@media (max-width: @xf-responsiveMedium) {
[data-template="forum_view"]
[data-container-key='node-1'],
[data-container-key='node-2'],
[data-container-key='node-3'],
[data-container-key='node-4'],
[data-container-key='node-5'] {
    .structItem-cell.structItem-cell--meta {
        display: none;
    }
    .structItem-cell.structItem-cell--latest {
        display: none;
    }
    .structItem-cell.structItem-cell--icon.structItem-cell--iconEnd {
        display: none;
    }
}
}

No errors reported.

 

[Paul B]

It needs to be on a single line as per my post.

 

[securedme]

I simplified it to two nodes:

[data-template="forum_view"][data-container-key='node-149'],[data-container-key='node-7'] .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}

Only node-7 got executed.

If I rearranged it to:

[data-template="forum_view"][data-container-key='node-7'],[data-container-key='node-149'] .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}

Only node-149 got executed.

 

[Paul B]

It works for me on my local, using this for example:

[data-template="forum_view"][data-container-key='node-2'],[data-container-key='node-26'],[data-container-key='node-80']
.p-title
{
    color: red;
}

 

[Kirby]

[data-template="forum_view"][data-container-key='node-19']  .structItem-cell.structItem-cell--icon,
[data-template="forum_view"][data-container-key='node-12']  .structItem-cell.structItem-cell--icon,
[data-template="forum_view"][data-container-key='node-11']  .structItem-cell.structItem-cell--icon,
[data-template="forum_view"][data-container-key='node-49']  .structItem-cell.structItem-cell--icon,
[data-template="forum_view"][data-container-key='node-17']  .structItem-cell.structItem-cell--icon,
[data-template="forum_view"][data-container-key='node-39']  .structItem-cell.structItem-cell--icon
{
    padding: 9px 15px 9px 9px;
}

should work.

 

[Russ]

You can approach it like this:

[data-template="forum_view"]
{
    &[data-container-key='node-1'],
    &[data-container-key='node-2'],
    &[data-container-key='node-3'],
    &[data-container-key='node-4'],
    &[data-container-key='node-5']
    {
        .structItem-cell.structItem-cell--icon
        {
            padding: 9px 15px 9px 9px;
        }
    }
}

Then you can easily add other elements:

[data-template="forum_view"]
{
    &[data-container-key='node-1'],
    &[data-container-key='node-2'],
    &[data-container-key='node-3'],
    &[data-container-key='node-4'],
    &[data-container-key='node-5']
    {
        .structItem-cell.structItem-cell--icon
        {
            padding: 9px 15px 9px 9px;
        }
        .structItem-title
        {
            font-size: 22px;
        }
    }
}

 

[securedme]

That does the job. Thanks a lot!

I combined the codes above to a very much simplified one:

[data-template="forum_view"]
{
    &[data-container-key='node-1'],
    &[data-container-key='node-2'],
    &[data-container-key='node-3'],
    &[data-container-key='node-4'], 
    &[data-container-key='node-5']
    {
        .structItem-cell.structItem-cell--icon
        {
            padding: 9px 15px 9px 9px;
        }
        @media (max-width: @xf-responsiveMedium)
        {
            .structItem-cell.structItem-cell--meta
            {
                display: none;
            }
            .structItem-cell.structItem-cell--latest
            {
                display: none;
            }
            .structItem-cell.structItem-cell--icon.structItem-cell--iconEnd
            {
                display: none;
            }
        }   
    }
}

This really looks neat. Thanks again @Russ.