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
Related
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.
Мультиклассы
К любому элементу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса. Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берётся значение у класса, который описан в коде ниже.
Синтаксис
Здесь E — обозначает любой элемент.
В стилях допустимо использовать запись следующего вида.
В таком случае стиль применяется только для элементов, у которых одновременно заданы классы class1 и class2 , т. е. в коде HTML используется конструкция .
Синтаксис
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Пример
Результат данного примера показан на рис. 1.
Рис. 1. Цвет и размер ссылок, заданный через классы
Примечание
Браузер IE до версии 7 некорректно работает с мультиклассами и понимает запись .a.b как .b , т. е. воспринимает только имя последнего класса, что приводит к ошибкам.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Справочник CSS
- !important
- ::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::placeholder
- ::selection
- :active
- :blank
- :checked
- :default
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :focus-within
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang
- :last-child
- :last-of-type
- :link
- :not
- :nth-child
- :nth-last-child
- :nth-last-of-type
- :nth-of-type
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited
- @charset
- @document
- @font-face
- @import
- @keyframes
- @media
- @page
- @supports
- @viewport
- accent-color
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- aspect-ratio
- backdrop-filter
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
- block-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- caption-side
- caret-color
- clear
- clip
- color
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-kerning
- font-size
- font-stretch
- font-style
- font-variant
- font-weight
- height
- hyphens
- image-rendering
- justify-content
- left
- letter-spacing
- line-clamp
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marks
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- padding
- padding-block
- padding-block-end
- padding-block-start
- padding-bottom
- padding-inline
- padding-inline-end
- padding-inline-start
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- perspective
- perspective-origin
- place-content
- pointer-events
- position
- quotes
- resize
- right
- scroll-behavior
- tab-size
- table-layout
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip-ink
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-fill-color
- text-indent
- text-orientation
- text-overflow
- text-shadow
- text-stroke
- text-stroke-color
- text-stroke-width
- text-transform
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- user-select
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
- zoom
Мультиклассы
К любому тегу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса. Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берется значение у класса, который описан в коде ниже.
Синтаксис
Здесь E — обозначает любой тег.
В стилях допустимо использовать запись следующего вида.
В таком случае стиль применяется только для элементов, у которых одновременно заданы классы class1 и class2 , т. е. в коде HTML используется конструкция .
HTML5 CSS 2.1 IE Cr Op Sa Fx
Paint.NET Photoshop цвет фон палитра слои свет панели линия прямоугольник пиксел градиент Результат данного примера показан на рис. 1.
Рис. 1. Цвет и размер ссылок, заданный через классы
Браузеры
Браузер IE до версии 7.0 некорректно работает с мультиклассами и понимает запись .a.b как .b , т.е. воспринимает только имя последнего класса, что приводит к ошибкам.
CSS по теме
How can I apply styles to multiple classes at once?
I want two classes with different names to have the same property in CSS. I don’t want to repeat the code.
Since both classes are doing the same thing, I should be able to merge it into one. How can I do that?
9 Answers 9
is what you are looking for.
+1, exactly what I was looking for. You can also then have a second, separate entry for .abc and/or .xyz for properties you don’t want to apply to both e.g. .xyz
You can have multiple CSS declarations for the same properties by separating them with commas:
although the selected answer is completely correct we can not guarantee that newbies will understand what it is doing. I would go with the one explained more. Since it is more of «how to fish» instead of «here is the fish».
I think abc was meant as one class name.. and xyz as another. Your suggestion is to use use a common class name for common properties which is unnecessary and confusing, given the question.
just seperate the class name with a comma.
If you use as following, your code can be more effective than you wrote. You should add another feature.
And if you have set these classes with their parents before, you should set them with parents (repeat each time) again as below:
Using CSS pseudo-classes :is (previously :any and :matches) and :where, you can use comma to match multiple classes on any level.
At the root level, :is(.abc, .xyz) and .abc, .xyz function almost identically. However, :is allows matching only a part of the selector without copying the whole selector multiple times.
For example, if you want to match .root .abc .child and .root .xyz .child , you can write code like this:
The difference between :is and :where is that :where is ignored when calculating specificity of the selector:
- specificity of .root :is(.abc, .xyz) .child = specificity of .root .abc .child
- specificity of .root :where(.abc, .xyz) .child = specificity of .root .child
Both pseudo-classes accept a forgiving selector list, meaning that if one selector fails to be parsed (due to unsupported syntax, either too new, too old or just incorrect), the other selectors would still work. This makes :is useful even at the root level, because it allows combining selectors using modern CSS features without fear that one selector will break the rest.
P.S. This question answers a more difficult variation of the question, but Google returns this page on too many queries, so I think this information will be relevant here.