CSS Partial Attribute Selectors with tags

Problem

I am re-factoring some CSS code and am wondering if someone can help me with this.

I want to style a number of elements based on a substring of their id attribute e.g. with the suffix 'horizontaldropdownmenu'

This works as expected :

div[id$='horizontaldropdownmenu']{
    padding-left: 25px;
    padding-top: 40px;
}

Using the same logic. How would I do this:

#ctl00_cphLogo_C016_ctl00_ctl00_siteMapControl_horizontaldropdownmenu li a:hover, #menu .active a
,#ctl00_cphLogo_C017_ctl00_ctl00_siteMapControl_horizontaldropdownmenu li a:hover, #menu .active a
,#ctl00_cphLogo_C022_ctl00_ctl00_siteMapControl_horizontaldropdownmenu li a:hover, #menu .active a
,#ctl00_cphLogo_C020_ctl00_ctl00_siteMapControl_horizontaldropdownmenu li a:hover, #menu .active a
,#ctl00_cphLogo_C039_ctl00_ctl00_siteMapControl_horizontaldropdownmenu li a:hover, #menu .active a
,#ctl00_cphLogo_C026_ctl00_ctl00_siteMapControl_horizontaldropdownmenu li a:hover, #menu .active a{
    color:#F15A28
}

or this:

#ctl00_cphLogo_C016_ctl00_ctl00_siteMapControl_horizontaldropdownmenu a
,#ctl00_cphLogo_C017_ctl00_ctl00_siteMapControl_horizontaldropdownmenu a
,#ctl00_cphLogo_C022_ctl00_ctl00_siteMapControl_horizontaldropdownmenu a
,#ctl00_cphLogo_C020_ctl00_ctl00_siteMapControl_horizontaldropdownmenu a
,#ctl00_cphLogo_C039_ctl00_ctl00_siteMapControl_horizontaldropdownmenu a
,#ctl00_cphLogo_C026_ctl00_ctl00_siteMapControl_horizontaldropdownmenu a{
    font: 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #696969;
    line-height: 1.2em;
}
Problem courtesy of: Naomi Owens

Solution

You've answered the problem yourself.

As div[id$='horizontaldropdownmenu'] selects all elements whose id ends with "horizontaldropdownmenu", you can just apply the same logic to those other two pieces of CSS:

div[id$='horizontaldropdownmenu'] li a:hover, #menu .active a {
    color:#F15A28
}
div[id$='horizontaldropdownmenu'] a {
    font: 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #696969;
    line-height: 1.2em;
}
Solution courtesy of: James Donnelly

Discussion

Depend on the other parts of your code, but you could something like that :

[id^=ctl00_cphLogo_C0'] a{
    /* some css */
}
[id^=ctl00_cphLogo_C0'] a:hover{
    /* some css */
}

It means : target all elements with an ID that begins with 'ctl00_cphLogo_C0'. Not sure that can work in your case.

Here's some doc about CSS advanced selectors : http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Discussion courtesy of: enguerranws

"Using the same logic"

div[id$='horizontaldropdownmenu'] li a:hover,
#menu .active a{
    padding-left: 25px;
    padding-top: 40px;
}

and

div[id$='horizontaldropdownmenu'] horizontaldropdownmenu a{
    font: 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #696969;
    line-height: 1.2em;
}

it's easy as that: add a descendant selector to the end of your attribute selector to target children elements

Discussion courtesy of: thetont

This recipe can be found in it's original form on Stack Over Flow.