CODEWITHSUNDEEP
csscss-selectors
Mona Abdelmajeed
Mona Abdelmajeed

Reputation: 686

Select element class dependent on its other class

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

Upvotes: 1

Views: 211

Answers (2)

BoltClock
BoltClock

Reputation: 724452

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.

Upvotes: 4

Hans Leautaud
Hans Leautaud

Reputation: 1752

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

Upvotes: 1

Related Questions