CSS получить классы
Мне нужно получить какой-то ярлык в css, но мне нужно пройти несколько классов, чтобы добраться до того, который я хочу. У меня 2 страницы, но мне нужно изменить только одну, и я думаю, что это возможно, потому что есть несколько различий в классах. Это HTML-код обоих.
<div class = "col-sm-4">
<div class = "form-group has-input-icon ">
<label for = "">Check in</label> <!--This label i need to catch-->
Второй
<div class = "col-sm-6">
<div class = "form-group has-input-icon search-destination">
<label for = "">Destination</label>
Мне нужно получить метку из первого кода, так как мне получить этот класс с помощью css? что-то вроде .col-sm-4-> form-group-> has-input-icon-> label, мне нужно поймать все эти классы, чтобы быть более конкретным, что мне нужно изменить, как это написать?
Уже пробовал, ничего не вышло.
.form-group .has-input-icon для первого элемента, а для второго вы можете использовать .search-destination, учитывая, что пункт назначения поиска уникален. В противном случае будет применен стиль для любого элемента с классом. Если вы хотите просто стилизовать этот конкретный элемент, вы можете использовать идентификатор, если это необходимо. Это просто комментарий, поскольку я не совсем уверен, что это лучший способ, но он работает. Посмотрите CSS на MDN, чтобы получить хорошее представление о нем и о том, как использовать CSS. Приветствует
Пробовал с этим тоже .col-sm-4.form-group.has-input-icon label {} все равно ничего
Ответы 2
Чтобы настроить таргетинг на первый элемент:
.col-sm-4 .form-group label {
background:red
}
Чтобы настроить таргетинг на второй элемент:
.col-sm-4 .form-group.search-destination label {
background:orange
}
Чтобы настроить таргетинг на первое, но исключить второе и / или другие:
.col-sm-4 .form-group:not(.search-destination) label {
background:orange
}
Попробуй это.
.col-sm-4 > .form-group.has-input-icon > label {
color: red;
}
.col-sm-6 > .form-group.has-input-icon.search-destination > label {
color: blue;
}<div class = "col-sm-4">
<div class = "form-group has-input-icon ">
<label for = "">Check in</label> <!--This label i need to catch-->
</div>
</div>
<div class = "col-sm-6">
<div class = "form-group has-input-icon search-destination">
<label for = "">Destination</label>
</div>
</div>Объяснение:
>означает «дети первого уровня»- Множественные селекторы без пробелов или
другие разделители означают, что все эти селекторы должны применяться к одному и тому же
элемент. Пример:
.form-group.has-input-icon.search-destinationозначает, что все эти 3 класса должны быть в выбранном элементе.
Очень простой. Мне это нравится!
для этого необходимо настроить таргетинг на оба элемента, где в вопросе указан 1 элемент, который должен быть выбран, что можно сделать с помощью css: not (), см. мой ответ ниже @awe
@DGRFDSGN .col-sm-4 на верхнем уровне достаточно для фильтрации первого, поскольку второй имеет .col-sm-6 на верхнем уровне. Думаю, вы не заметили, что они разные. Ваша версия с использованием :not(.search-destination) также будет работать, если не включает в себя какие-либо селекторы .col-sm- на верхнем уровне.
Что-то подобное?
div .form-group.has-input-icon label {}