Главная » Языки программирования

Example

Содержание
  1. Комбинированные селекторы
  2. Кратко
  3. Группировка: .element1 , . element2
  4. Пример
  5. Как пишется
  6. Как понять
  7. Объединение: .class1 . class2
  8. Пример
  9. Как пишется
  10. Как понять
  11. Потомки: .element1 . element2
  12. Пример
  13. Как пишется
  14. Как понять
  15. Непосредственно вложенные: .element1 > . element2
  16. Пример
  17. Как пишется
  18. Как понять
  19. Подсказки
  20. Смежные: .element1 + . element2
  21. Пример
  22. Как пишется
  23. Как понять
  24. Последующие: .element1 ~ . element2
  25. Пример
  26. Как пишется
  27. Как понять
  28. На практике
  29. Realetive советует
  30. Роман Баранников советует
  31. How to apply two CSS classes to a single element [duplicate]
  32. Linked
  33. Related
  34. Hot Network Questions

Комбинированные селекторы

Селекторы бывают сложнее чем просто по классу, тегу или идентификатору. Перечисляем все доступные комбинированные селекторы.

Время чтения: меньше 5 мин

  1. Кратко
  2. Группировка: .element1, .element2
    1. Пример
    2. Как пишется
    3. Как понять
    1. Пример
    2. Как пишется
    3. Как понять
    1. Пример
    2. Как пишется
    3. Как понять
    1. Пример
    2. Как пишется
    3. Как понять
    4. Подсказки
    1. Пример
    2. Как пишется
    3. Как понять
    1. Пример
    2. Как пишется
    3. Как понять
    1. Realetive советует
    2. Роман Баранников советует

    Обновлено 10 октября 2022

    Кратко

    Скопировать ссылку «Кратко» Скопировано

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

    Группировка: .element1 , . element2

    Скопировать ссылку «Группировка: .element1, .element2» Скопировано

    Пример

    Скопировать ссылку «Пример» Скопировано

    Если нескольким селекторам нужно задать одно и то же правило, то можно написать длинно:

     h1  font-weight: bold;> h2  font-weight: bold;> h3  font-weight: bold;> h1  font-weight: bold; > h2  font-weight: bold; > h3  font-weight: bold; >

    А можно перечислить все селекторы через запятую и написать всего одно CSS-правило:

     h1, h2, h3  font-weight: bold;> h1, h2, h3  font-weight: bold; >

    Как пишется

    Скопировать ссылку «Как пишется» Скопировано

    Селекторы просто записываются в произвольном порядке через запятую:

     .selector1,code,#id,[attr="value"]  color: red;> .selector1, code, #id, [attr="value"]  color: red; >

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

     .heading span,.block,.wrapper  color: red;> .heading span, .block, .wrapper  color: red; >

    Как понять

    Скопировать ссылку «Как понять» Скопировано

    В примере свойство применится для трёх типов селекторов:

    Объединение: .class1 . class2

    Скопировать ссылку «Объединение: .class1.class2» Скопировано

    Пример

    Скопировать ссылку «Пример» Скопировано

     .selector.selector_modificator  color: red;> .selector.selector_modificator  color: red; >

    Как пишется

    Скопировать ссылку «Как пишется» Скопировано

    Этот приём применим только для классов и атрибутов, потому что только их может быть больше одного. Селекторы записываются слитно. Стили будут применены только к тому элементу, который содержит все перечисленные селекторы.

    Как понять

    Скопировать ссылку «Как понять» Скопировано

    Такое «склеивание» объединяет селекторы в одно правило.

    Потомки: .element1 . element2

    Скопировать ссылку «Потомки: .element1 .element2» Скопировано

    Пример

    Скопировать ссылку «Пример» Скопировано

     article h3  color: red;> article h3  color: red; >

    Как пишется

    Скопировать ссылку «Как пишется» Скопировано

    Селекторы записываются последовательно через пробел.

    Как понять

    Скопировать ссылку «Как понять» Скопировано

    Последовательность селекторов отражает вложенность — каждый следующий селектор должен обязательно находиться на каком-то уровне вложенности в предыдущий селектор.

    Непосредственно вложенные: .element1 > . element2

    Скопировать ссылку «Непосредственно вложенные: .element1 .element2» Скопировано

    Пример

    Скопировать ссылку «Пример» Скопировано

     article > h3  color: red> article > h3  color: red >

    Как пишется

    Скопировать ссылку «Как пишется» Скопировано

    Селекторы разделяются знаком > .

    Как понять

    Скопировать ссылку «Как понять» Скопировано

    Последовательность селекторов отражает непосредственную вложенность — селектор справа от оператора должен быть прямым потомком селектора из левой части:

     article > h3  color: red;> article > h3  color: red; >

    К h3 . article _ _ heading стили для article > h3 не применятся, т. к. прямой потомок — div . article _ _ header , а не :

        
    Заголовок
               article class="article"> div class="article__header"> h3 class="article__heading">Заголовокh3> div> article>

    В этом примере стили к заголовку применятся, потому что является прямым потомком :

       
    Заголовок
          article class="article"> h3 class="article__heading">Заголовокh3> article>

    И тут тоже всё в порядке — по-прежнему является прямым потомком , потому что располагается на ближайшем уровне вложенности, хоть и следует после div . article _ _ header :

       
    …
     
    Заголовок
          article class="article"> div class="article__header">…div> h3 class="article__heading">Заголовокh3> article>

    Подсказки

    Скопировать ссылку «Подсказки» Скопировано

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

    Смежные: .element1 + . element2

    Скопировать ссылку «Смежные: .element1 + .element2» Скопировано

    Пример

    Скопировать ссылку «Пример» Скопировано

     label + input  color: red;> label + input  color: red; >

    Как пишется

    Скопировать ссылку «Как пишется» Скопировано

    Селекторы объединяются знаком + .

    Как понять

    Скопировать ссылку «Как понять» Скопировано

    Элемент справа от + должен следовать в HTML сразу за элементом слева от + . Проще говоря, правый элемент должен быть соседом левого элемента, чтобы смежный селектор сработал.

    Код из примера применится только к такому , который стоит сразу после :

     label + input  color: red;> label + input  color: red; >

    К этому не применится, т. к. перед идёт :

      
    …
     label>label> p>…p> input>

    При такой разметке стиль применится только к первому , но не ко второму:

      label>Лейблlabel> input> input>      
      label>Лейблlabel> div> input> div>

    Последующие: .element1 ~ . element2

    Скопировать ссылку "Последующие: .element1 ~ .element2" Скопировано

    Пример

    Скопировать ссылку "Пример" Скопировано

     .star:hover ~ .star  color: red;> .star:hover ~ .star  color: red; >

    Как пишется

    Скопировать ссылку "Как пишется" Скопировано

    Селекторы объединяются с помощью символа ~ (тильда).

    Как понять

    Скопировать ссылку "Как понять" Скопировано

    Правило применится ко всем блокам, подходящим под правый селектор, при учёте, что они являются соседями блоков из селектора слева от ~ . При этом оба селектора должны иметь одного родителя и находиться на одном уровне вложенности. В HTML правый селектор должен идти после левого селектора.

    На практике

    Скопировать ссылку "На практике" Скопировано

    Realetive советует

    Скопировать ссылку "Realetive советует" Скопировано

    🛠 Лучше записывать селекторы по одному на строчку — так их легче читать и редактировать:

     .selector1,code,#id,[attr="value"]  color: red;> .selector1, code, #id, [attr="value"]  color: red; >

    🛠 Объединение увеличивает специфичность правила, поэтому это может быть удобно для переопределения свойств без !important :

    Код ниже нельзя редактировать по каким-то причинам:

     .class1  color: red;> .class1  color: red; >

    Увеличим специфичность, чтобы переопределить правило, описанное в нередактируемой части и потому имеющее больший вес:

     .class1.class2  color: green;> .class1  color: red;> .class1.class2  color: green; > .class1  color: red; >

    В итоге текст в блоке, имеющем сразу и класс .class1 и класс .class2 , будет зелёного цвета.

    🛠 Получается, что даже невинный пробел уже имеет значение при выборе селектора на любом уровне вложенности.

    Независимо от уровня вложенности селектор article h3 «найдёт» с текстом «Очень вложенный заголовок» и любые другие , которые располагаются внутри :

                
    Очень вложенный заголовок
                    
    Заголовок
                                        article> div> div> div> div> div> div> div> div> div> h3>Очень вложенный заголовокh3> div> div> div> h3>Заголовокh3> div> div> div> div> div> div> article>

    Роман Баранников советует

    Скопировать ссылку "Роман Баранников советует" Скопировано

    🛠 С помощью смежного комбинатора удобно выбирать группу одинаковых элементов по принципу «все, кроме первого» — например, чтобы задать отступ.

     li + li  margin-top: 1em;> li + li  margin-top: 1em; >

    Классический пример — вёрстка «звёздного» рейтинга. Для начала опишем структуру:

             div class="rating"> button>★button> button>★button> button>★button> button>★button> button>★button> div>      
     button  border: none; background-color: transparent; font-size: 5em;> button:hover,button:focus,button:hover ~ button,button:focus ~ button  color: #F498AD;> button  border: none; background-color: transparent; font-size: 5em; > button:hover, button:focus, button:hover ~ button, button:focus ~ button  color: #F498AD; >

    Но сейчас при наведении курсора будут выделяться все элементы после (то есть справа).

    Чтобы это исправить, мы изменим порядок следования элементов с помощью CSS-свойства direction : rtl .

    Добавим это свойство родителю звёздочек .rating :

     .rating  direction: rtl;> button  border: none; background-color: transparent; font-size: 5em;> button:hover,button:focus,button:hover ~ button,button:focus ~ button  color: #F498AD;> .rating  direction: rtl; > button  border: none; background-color: transparent; font-size: 5em; > button:hover, button:focus, button:hover ~ button, button:focus ~ button  color: #F498AD; >

    Источник

    How to apply two CSS classes to a single element [duplicate]

    1) Use multiple classes inside the class attribute, separated by whitespace (ref):

    2) To target elements that contain all of the specified classes, use this CSS selector (no space) (ref):

    Include both class strings in a single class attribute value, with a space in between.

    As others have pointed out, you simply delimit them with a space.

    However, knowing how the selectors work is also useful.

    Consider this piece of HTML.

    Using .a < . >as a selector will select the first and third. However, if you want to select one which has both a and b , you can use the selector .a.b < . >. Note that this won't work in IE6, it will simply select .b (the last one).

    This is very clear that to add two classes in single div, first you have to generate the classes and then combine them. This process is used to make changes and reduce the no. of classes. Those who make the website from scratch mostly used this type of methods. they make two classes first class is for color and second class is for setting width, height, font-style, etc. When we combine both the classes then the first class and second class both are in effect.

    Though this might answer the question, please also add a short explanation what your code does and why it solves the initial problem.

    In practice, two classes are used for an element when the two classes format different non-overlapping areas, e.g., one class specifies the color and the other the alignment of text. Then you use these two classes for an element and don't need to write a third class that is the amalgam of the other two, see my source code.

         .color-red .center-align-text 
    Centered pepperoni

    Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

    Linked

    Hot Network Questions

    Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

    By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

    Источник

    Читайте также:  Progress bar python pyqt5
Оцените статью
© 2024 Программирование