Выберите класс элемента в зависимости от его другого класса

Question

Я допустил несколько ошибок, и мне нужно знать, можно ли их решить: (

посмотрите на этот 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>

Как сделать так, чтобы это влияло на первый класс ошибок, а не на второй

я сделал это

  <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>

Есть ли другой способ я использовал .error[class*='icon']

Answer 1

Вы можете использовать .error.icon вместо .error[class*='icon'], хотя я не знаю, как ваш селектор атрибутов может повлиять на ваш второй .error элемент.

Или если вы не хотите добавлятьдополнительные классы, которые вы можете использовать вместо .error:first-child, при условии, что в том же элементе контейнера нет других родственных элементов.

Answer 2

div.icon.error самый точный способ сделать это