Первый элемент, который плавал право

Question

я установил margin для некоторых элементов:

button { 
    margin: 10px 10px 0 0; 
} 

a { 
    margin: 10px 20px 0 0; 
} 

Теперь, когда я float: right любой из этих элементов, я хочу установить margin-right: 0 для первого правого плавали элемента. Что-то вроде ниже:

.float-right { 
    float: right; 
    /* only for first instance */ margin-right: 0; 
} 

Каковы варианты этого?

Несколько ограничений:

• У меня есть различные поля для различных элементов, и я хочу .float-right класса, чтобы быть универсальным, так что я не могу установить margin-right: 0 к классу, а затем установить запас для других экземпляров элемент с правопорядком (.float-right ~ .float-right).
• В моем случае нецелесообразно обертывать элементы в контейнер, чтобы я мог просто использовать псевдоселектор :first-child.

Ниже приведен простой пример, когда у меня есть логотип <a> и логин <a> - последний плавал право, это не первый элемент типа <a>, и мне нужно margin-right быть 0.

a { 
 
    margin-right: 50px; 
 
} 
 

 
.float-right { 
 
    float: right; 
 
} 
 

 
.float-right:first-child { 
 
    margin-right: 0; 
 
}

<a href="">LOGO</a> 
 
<a href="" class="float-right">Login | Register</a>

Answer 1

Что вы на самом деле просят это first-of-class, который пока еще не существует.

Вы можете настроить, однако, первый элемент класса, который сразу же следует за тем, у которого нет этого класса с сакером :not() и непосредственным селектором для сестер.

Как следует:

a { 
 
    margin-right: 50px; 
 
} 
 
.float-right { 
 
    float: right; 
 
} 
 
*:not(.float-right) + .float-right { 
 
    margin-right: 0; 
 
}

<a href="">LOGO</a> 
 
<a href="" class="float-right">Login | Register</a>

Это не идеально, как это на самом деле не расширяемый в значительной степени, но он предлагает решение для вашего конкретного запроса.

Answer 2

Пожалуйста, попробуйте так:

.float-right:first-child{ 
    margin-right: 0; 
} 

Answer 3

Если вы не возражаете решение JQuery, вы можете попробовать использовать .Первый JQuery (в), чтобы вы первый .float правый элемент в документе:

$("body").find(".float-right").first().css("margin-right","0"); 

Данный объект JQuery, который представляет набор элементов DOM, метод .first() создает новый объект jQuery из первого элемента в этом наборе. Вы можете прочитать об этом здесь: https://api.jquery.com/first/

Я создал jsFiddle для вас, чтобы показать - https://jsfiddle.net/0ccb36mz/