Select element class dependent on its other class

Question

i made some mistakes and need to know if can solve it :(

look to this html

  <style>
    .error { width:32px; height:32px; display:inline-block; }
    /* This is icon class */
  </style>

  <div class="error"> this Is error icon 32px * 32px </div>

  <div class="error"> this Is error notice  500px * 35px </div>

How can i make it effect the first error class and don't effect the second

i did this

  <style>
     .error[class*='icon'] { width:32px; height:32px; display:inline-block; }
      /* i was think it should effect the first class only but not ???  */
  </style>

  <div class="icon error"> this Is error icon 32px * 32px </div>

  <div class="notice error"> this Is error notice  500px * 35px </div>

Is there is other way i used .error[class*='icon']

Answer 1

You can use .error.icon instead of .error[class*='icon'], although I don't know how your attribute selector could possibly affect your second .error element.

Or if you don't want to add the extra classes you can use .error:first-child instead, assuming there aren't any other sibling elements around in the same container element.

Answer 2

div.icon.error is the most precise way to do it