Оператор условия для первой иконки в каждой строке

0

Я хочу создать оператор условия для первого значка в каждой строке, чтобы добавить к нему код "margin-left: 0px". Каждый значок на моем сайте имеет стиль margin-top и margin-left от 5 px. Однако исключение должно быть первым из каждой строки.

http://www.juliancelaj.com/portfolio.html

HTML

<a id="small_boardgame" class="small_hoverEffect" style="margin-left: 0px;" href="img/boardgamecover_3.jpg" rel="lightbox[best_portfolio]" title="Uno Board Game Cover" alt="Uno Board Game Cover, image, cards, throwing, machine"></a>
                        <a id="small_video_game" class="small_hoverEffect" href="img/vidgame_3.jpg" rel="lightbox[best_portfolio]" title="Video Game Cover" alt="UEFA Football 2011 Cover, Podolski, Rage360 Concept artbox, speed, emotion"></a>
                        <a id="small_cereal" class="small_hoverEffect" href="img/cerealcover_3.jpg" rel="lightbox[best_portfolio]" title="Cereal Box Cover" alt="Mario, Luigi, Cereal Box Cover, Wario, fire, strawberries, concept, mushrooms, illustration, delicious, design"></a>

CSS

#small_boardgame {
    background-image:url(img/boardgamecover.jpg);
}

#small_video_game {
    background-image:url(img/vidgame.jpg);
}

#small_cereal {
    background-image:url(img/cerealcover.jpg);
}

.small_hoverEffect {    
    width:50px;
    height:50px;
    display:block;
    background-repeat:no-repeat;
    float:left;
    margin: 5px 0 0 5px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;  
}

.small_hoverEffect:hover {
    background-position: 0 -50px;
    border-radius: 50%;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);  
}

Я добавил класс small_hoverEffect и эффект зависания к нему каждому значку div на странице. Мне было интересно, сможет ли кто-нибудь найти решение, используя этот класс div, чтобы установить условие, когда каждый раз, когда один из значков сначала находится в новой строке, он имеет условие "margin-left: 0px". Ширина обертки устанавливается так, чтобы значки падали на следующую строку после того, как каждый раз помещал 12 значков на одну и ту же строку.

Я попытался взглянуть на предложение Джонатана,

.small_hoverEffect:first-child {
    margin-left: 0px !important;    
}

но это все еще не сработало. Первая из каждой строки по-прежнему перемещается на 5 пикселей слева.

  • 0
    Я вижу много тэгов в вашем вопросе, но, судя по названию, вы ищете first-child селектор CSS
  • 0
    Отредактировано первое сообщение. Я попробовал это Джонатан, и это все еще не имело никакого эффекта.
Показать ещё 4 комментария
Теги:
conditional-statements

2 ответа

0

Вы можете удалить маркер слева от всех значков и сделать:

.icon + .icon /* if element left to element with class "icon" have the same class, do ... */
{
    margin-left: 30px;
}

Надеюсь, я помог

0

положите свою маржу справа, а не влево, это будет иметь тот же эффект, который вы хотите.

  • 0
    Это не дает ответа на вопрос. Чтобы критиковать или запросить разъяснения у автора, оставьте комментарий под своим постом.
  • 0
    Да. Он сохраняет первый значок в каждом ряду с левым полем в 0px, сохраняя поле в 5px между каждым.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню