Можно, но чаще используют пару. Лучше, если вы разберете на конкретном примере, чем прочитаете словесное описание.
Посмотрите эту статью, например.
1 лайк
<li class="hit"></li>
<li class="miss"></li>
Селектор .hit + .miss применит стили к элементу с классом miss, так как перед ним есть элемент с классом hit.
Я не понял в чем смысл варианта “.hit + .miss”. Зачем вообще нужная такая запись, если на практике так делать вряд ли будешь и просто задашь нужные классы нужным элементам. Не понял конкретно этот вариант.
Вот Вам пример:
<input type="radio" id="radio" checked> <label for="radio"></label>
Задача: нужно прописать стили, чтобы при нажатии по кнопке (первый тег) произошли изменения связанного с ним тега label. Как Вы предлагаете решить эту задачу, прописывая классы этим тегам?
Ммм, типа цвет подписи изменить что ли? Как вариант
С id этот принцип вообще работает?
Я запутался. Мне сначала казалось что можно этот принцип применять только к соседним одинаковым элементам, типа li. А теперь мне кажется что вообще с любыми соседними. Тогда если задать класс, и использовать конструкцию выше - должно сработать?
Это пример - слайдер (правда, только с одной кнопкой - такого не бывает, но чисто для примера). Самой кнопке input будет задано свойство display: none;. Т.к. такие радио-кнопки невозможно стилизовать, по умолчанию они крошечные и невзрачные. А я вот хочу, например, чтобы эта кнопка была размером с полэкрана, красного цвета, с центром, который отделяется от края прозрачной полосой. И вот эти свойства я задам label - который могу стилизовать, как моя душа пожелает. Но нам же нужно создать связь! Ведь функцию несёт в себе именно input! А label - это так, чисто декорация. И вот как связать их так, как Вы предлагаете - чисто задав обоим тегам какие-то классы?
1 лайк
Абсолютно не к одинаковым. Я же привожу Вам пример. В плане вопроса в последнем сообщении поясните, я не понял.
Я немного туго соображаю, потому что не понимаю как реализовать то, что Вы описываете. На основе изученного материала, наверное, задать двум тегам классы и использовать конструкцию соседних селекторов.
Но я не понимаю условия задачи немного. Понял что Вы хотите стилизовать (например) радио кнопку - маленький круг. Но я не понял что дальше написано. Прописать стили для кнопки в label? Почему именно там?
За динамическое изменение объекта вроде hover отвечает, нет? Типа навел мышку, нажал - получил эффект
Еще и еще раз перечитал условия задачи.
Есть два тега, каждому прописываем какие-нибудь стили. И хотим их связать так, что бы при нажатии на кнопку изменялся label, я правильно понял?
Я не знаю как сделать так, что бы при нажатии на кнопку с одними стилями она меняла стили у другого объекта…
Потому что некоторые теги, например, радио-кнопки, по природе такие - ну, нельзя им задать параметр ы другие в стилях. Вот по умолчанию она круглая и серая. А я хочу сделать её квадратной и красной. Ну, не воспринимает этот тег ряд свойств. Поэтому и говорят - “плохо стилизуемые”. Вот поэтому здесь и приходят на помощь соседние селекторы: я скрою input (его не будет видно), а его “представителем” будет label, который я сделаю квадратным и красным с прозрачной прослойкой между центральной частью и краешком. И чтобы создать связь, чтобы эта кнопка работала, я и напишу:
input + label {}; И пропишу в этих скобках то, как я хочу видеть свою кнопку. Но - опять же - функцию на себе несёт именно радио-кнопка, а не её “маска” - label. Поэтому при записи с “+” создаётся связь. И при клике на label - квадратной и красной - на самом деле будет нажиматься input, который и связан с ней.
1 лайк
Если хотите, можем сконтактироваться лично, я могу показать Вам в скайпе, как это работает.
Кажется я Вас понял. Кнопка будет визуально скрыта, но тем не менее функцию свою она выполняет и не важно как она выглядит. label будет отвечать за ее стилизацию. Одного не понял - как правильно воспринимать эту запись: input + label {}. Типа функция остается у тега слева, но при этом тег справа передает или “наслаивает” свои стили на левый тег. Как правильно? Т.е. почему бы не наоборот написать? label + input {}
Ерунду написал в предпоследнем предложении. Но последний вопрос остался: почему бы не наоборот написать? label + input {}
Смутно уже стал соображать почему именно та форма записи, но все же не до конца ясно это вижу.
Типа слева идет связываемый с label тег, label имитирует функционал левого тега, а за стилизацию отвечает лично.
Таким образом если написать label + input {}, то выходит что input берет на себя стилизацию, а это невозможно в данной задаче.
Я правильно понимаю логику?
Касательно первой части сообщения - да, именно так. Серая унылая по умолчанию кнопка будет скрыта, но - самое главное! - она будет выполнять свою функцию, да. А тыкать мы будем по label - который будет “имитацией” нашей кнопки (он будет красивенький, как мы хотим). Но т.к. за счёт + установлена связь, то реально работать будет именно сама кнопка, а неё “маска”. Т.е. label - тыкнутый - передаст кнопке, что её “тыкнули”. Чтобы она отправила информацию.
Касательно “правый” и “левый” - для себя я понимал по-другому: посмотрите на разметку HТML. И вспомните, что чтение кода браузером идёт СВЕРХУ ВНИЗ. Поэтому если Вы напишите (мой пример) - input + label, то всё нормально: ведь сначала браузер найдёт input, ну, а под ним на самом деле лежит его label. Всё законно. А если поменяете “слагаемые” местами - то браузер найдёт, конечно, label. Но далее чтение разметки ведь пойдёт вниз. А input находится наверху. Поэтому работать не будет - браузер не будет возвращаться вверх. Это как раз той случай, когда от “перемены мест слагаемых” сумма МЕНЯЕТСЯ!!! Теперь ясно?
Если и сейчас непонятно, оставьте скайп - созвонимся и покажу на примере.
Понял, то есть что бы работал вариант label + input {} надо наверху поменять строки местами, тогда будет работать, правильно?
<label for="radio"></label>
<input type="radio" id="radio" checked>