Объединение стилей в один.

[sologub]

Здравствуйте форумчане!

Имеется код:

<div class="circle">
  <div class="drop">
    <div class="circle2">
      <div class="circle3"></div>
    </div>
  </div>
</div>

.circle {
  background-color: #BB3A56;
  margin: 0 auto 0 auto;
  width: 110px;
  height: 110px;
  border-radius: 100%;
}

.drop{
    width: 60px;
    height: 60px;
    position: relative;
    top: 20px;
    left: 25px;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
    border: 5px;
    background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0.53, rgb(255,255,255)),
	color-stop(0.52, rgb(213,228,235))
);
   -ms-transform: rotate(-225deg);
    -webkit-transform: rotate(-225deg);
    transform: rotate(-225deg);
  
}

.circle2 {
  background-color: #ffffff;
  position:relative;
   top: 16px;
    left: 13px;
  width: 30px;
  height: 30px;
  border-radius: 100%;
}

.circle3 {
  background-color: #BB3A56;
  position:relative;
  top: 3px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 100%;
}

В результате получается: http://codepen.io/sologub/pen/azwKYK?editors=110

Стоит вопрос об объединении его в один стиль. Дабы была возможность указывать <div class="стиль_картинки"></div>. Возможно ли это?
Или я иду по неверному пути?

[Naive]

Все верно, возможно.

[sologub]

Сообщение от Naive

Все верно, возможно.

А куда копать? Подскажите?

[grominfo]

Сообщение от sologub

А куда копать? Подскажите?

Ну, самый просто способ, это использовать наследование селекторов

.main-div{}  /*первый див*/
.main-div div{} /*второй див*/
.main-div div div{} /*третий див*/

Но это не ваш метод, просто пример.

Второй способ, это реогранизация стилей. В таком виде, как у вас сейчас, применить указанные вами стили в один не получится. Все зависит от конкретной задачи. Если вам нужно, чтобы просто был красный круг,а в нем картинка, то достаточно просто

    
     .main-c{
        background: #BB3A56;
        margin: 0 auto 0 auto;
        width: 110px;
        height: 110px;
        border-radius: 100%;
    }
    .main-c img{
        width: 60px;
        height: 60px;
        position: relative;
        top: 20px;
        left: 25px;
    }

<div class="main-c"><img alt="" src="" /></div>

[sologub]

Спасибо grominfo за уделенное внимание.

Второй способ попадал в поле зрения - но я его отбросил по причине необходимости использования картинок, тогда как хочется "pure CSS".

Первый способ не смотрел - попробую.

Пробую :before и :after. Для простеньких картинок (где менее трех элементов) все просто. Но при количестве более трех - становиться следующий вопрос: можно ли использовать несколько :before в одном. Но это уже совсем другая тема.