How to make better CSS ID rules


Tags: html,css

Problem :

Im learning html + css and have question, it possible to write rules for several ID's, like what I have to reach my goal

<!-- language: lang-css-->

 #menu-item-207 .menu-image-title {
   color: black !important;
 }
 #menu-item-207 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-206 .menu-image-title {
   color: black !important;
 }
 #menu-item-206 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-205 .menu-image-title {
   color: black !important;
 }
 #menu-item-205 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-204 .menu-image-title {
   color: black !important;
 }
 #menu-item-204 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-203 .menu-image-title {
   color: black !important;
 }
 #menu-item-203 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-202 .menu-image-title {
   color: black !important;
 }
 #menu-item-202 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-201 .menu-image-title {
   color: black !important;
 }
 #menu-item-201 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-200 .menu-image-title {
   color: black !important;
 }

How can i adapt it? Thank you in advance!



Solution :

You can use comma to combine several selectors:

 #menu-item-207 .menu-image-title,
 #menu-item-206 .menu-image-title,
 #menu-item-205 .menu-image-title,
 #menu-item-204 .menu-image-title,
 #menu-item-203 .menu-image-title,
 #menu-item-202 .menu-image-title,
 #menu-item-201 .menu-image-title,
 #menu-item-200 .menu-image-title {
    color: black !important; 
 }  
 #menu-item-207 .menu-image-title:hover,
 #menu-item-206 .menu-image-title:hover,
 #menu-item-205 .menu-image-title:hover,
 #menu-item-204 .menu-image-title:hover,
 #menu-item-203 .menu-image-title:hover,
 #menu-item-202 .menu-image-title:hover,
 #menu-item-201 .menu-image-title:hover,
 #menu-item-200 .menu-image-title:hover {
     color: #0095d1 !important; 
 }

    CSS Howto..

    How to align this bootstrap radio button?

    How to center align a div vertically which uses bootstrap?

    how to set shadow for round image(css)

    how to reverse CSS animation on second click with jQuery

    How to get the values of the css style attributes in gwt

    How can I fade in new HTML elements with CSS [duplicate]

    How to css this little button next to