Css class combine classes

Combining CSS Selectors

Published: 18 th of February, 2014 This article describes all current techniques for combining CSS selectors. Some widely used, other seldom, but also few new, from CSS Level 4 Specification (currently unstable working draft) that are not yet supported in any modern browser. This article gives you a vague idea about how to combine CSS selectors and how this is going to be possible in the future.

The following three are rather well known, they go way back to the beginning and until CSS Level 2.

Descendant Combinator

Pattern: E F
Matches any F element that is a descendant (inside) of an E element.

Example CSS: h1 em < color: blue; >
Example HTML:

This will be blue

Matches an an EM element that is contained within an H1 element.

Basic technique and probably the most widely used, which was already present in CSS Level 1, back in 1996.

Child Combinator

Pattern: E > F
Matches any F element that is a child of an element E.

Example CSS: body > p < color: blue; >
Working example HTML:

Example where it does not match the element

:

Element

is a child of an element , therefore the CSS rules does not apply.

You can also combine descendant combinators and child combinators, for example: div ul > li span .

Next sibling combinator

Pattern: E + F
The selector matches if E and F share the same parent and E immediately precedes F.
Meaning it selects all F elements that are placed immediately after E elements.
Note: Style rule is applied to an element that is matched by the selector F.

Example CSS: h1 + h2 < opacity: 0.8; >
Working example HTML:

Title
 
Subtitle with lowered transpareny
 
Paragraph

Example where it does not match:

Title
 
Paragraph
 
Subtitle is not transparent

That is because isn’t immediatelly followed after an element

Very useful, but seldom used.

Compounding multiple class or ID selectors

Pattern: .class1.class2(.classN) / #id.class1(.classN) / .class1(.classN)#id

Example CSS: .modal.modal-red < border-color: red; >
Working example HTML:

 
This modal has a red border
 

NOT working example:

That is because an element that is matched by .modal-red is a .modal ‘s child element and not an element with two compound classes.

• multiple classes,
• ID selector plus multiple classes,
• multiple classes plus ID selector,
• multiple classes plus ID selector plus multiple classes.

We can combine as many classes and IDs into a single selector as we want. Chris Coyer published an article on CSS-Tricks titled Multiple Class / ID and Class Selectors and he explains it in a detailed way.

In CSS Selectors Level 3 there were not much new regarding combining selectors, just the Following Sibling Combinator:

Following Sibling Combinator

Pattern: E ~ F
The selector matches when an F element is preceded by an E element (not necessarily immediately, as in case of E > F).

Example CSS: h1 ~ p < color: grey; >
Example HTML:

Title
 Recently published 
This paragraph is in color grey.

Once again, Chris Coyer already covered this combination in general sibling.

If you are worried about browser support, you need not be. All mentioned above are supported in every modern browsers and Intern Explorer 7+.

So let’s see what there’s up to in CSS Selectors Level 4 (which is a draft at the time of writing). Keep in mind that the following examples are NOT YET supported in any modern browser.

Reference combinator

Pattern: E /foo/ F
Matches an F element ID-referenced by an E element’s foo attribute.

Example CSS: label:hover /for/ input < border: 1px solid red; >
The example above matches and an INPUT element (and will add red border to it) when its LABEL is hovered-over. It is referenced by its label.

In case of curiosity, you can read reference combinator’s specification. This example is also the first to incorporate slashes (/) to the CSS, but personally, apart from some edge cases I don’t find much use of it.

Determining the subject of a selector («parent selector»)

Pattern: !E > F
Matches an E element that is parent of an F element.

The subject of the selector can be explicitly identified by prepending an exclamation mark (!) to one of the compound selectors in a selector. It might also be explained as a «parent selector».

If you have experience with programming languages, then the presence of an exclamation mark might mislead you. The specs are still in draft and I kind of hope the syntax will change to avoid avoid this «! = not» issue.

Example CSS:
!ul > li < border: 1px solid green; >matches element ul, unordered list gets a green border.
ul > li < border: 1px solid green; >matches element li, list items get a green border.

Keep an eye on W3C Working Draft on Selectors Level 4 to be informed about the forthcoming possibilities, or follow it’s editors Tab Atkins Jr. and Elika J. Etemad on Twitter.

About me

Currently developing Turtl. Formerly worked at Celtra developing application’s front-end. Earned PhD in June 2016; thesis titled “Evaluation of user experience in mobile advertising”.
Slovenia CSS Meetup organiser.

Recent contributions:

Recommended reading

Scalable and Modular Architecture for CSS is a must read for everyone architecting maintainable CSS for larger sites. by Jonathan Snook, @snookca.

See me elsewhere

Источник

CSS combine two classes

CSS HTML DEMO http://jsfiddle.net/ppqCD/ Solution 3: Use the css pseudo-class selectors Solution 1: You can use commas to separate classes with the same properties, use spaces to write properties for subclasses. And you can make use of the bootstrap file: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css Here’s the reference: https://v4-alpha.getbootstrap.com/utilities/spacing/ Find the classes you need and copy their CSS styles and add them in a class of your own naming as: You can make a class by the name of suppose: pymt-5 css assign multiple classes to one element

CSS combine two classes

Do it like this: DEMO

EDIT

Note: The .no-margin class should be below the .image class because of the cascading nature of CSS

I always try to write my code simple as it’s possible, especially the html code. Cooperation with backend coder will be easier. I remove class no-margin and use first-child atribute. The code is below, try it.

  DEMO 

Class — Combine Two Classes in CSS?, why do you want to combine two classes ? I would make two seperate classes and use them in my controls as below. .class1 < /* All styles for class1*/ >.class2 < /* All styles for class2*/ >This way you can add both classes to your controls/DOM elements keeping them seperate in your CSS.

How can I combine CSS code with similar class

You can use commas to separate classes with the same properties, use spaces to write properties for subclasses. You also do not need to use the div tag when declaring the css property, if the class is only used for the div tag.

 bookedSeats span, emptySeats span < display: none; position: relative; color: darkblue; font-family: serif; >bookedSeats:hover span, emptySeats:hover span  Solution 2: 

 div.bookedSeats span, div.emptySeats span < display: none; position: relative; color: darkblue; font-family: serif; >div.bookedSeats:hover span, div.emptySeats:hover span 

, is use to set two and more class, id combine css

Youc ould make it one class for all seats, and then add a secondary class for the areas which they differentiate.

div.Seats span < display: none; position: relative; color: darkblue; font-family: serif; >div.Seats:hover span < display: block; >.Booked < /* Add CSS that differs from Empty */ >.Empty < /* Add CSS that differs from Booked */ >

Class — CSS combine two classes, CSS combine two classes. Ask Question Asked 9 years, 2 months ago. Modified 9 years, I literally started learning HTML&CSS 3 days ago. css class. Share. Follow edited Jun 15, 2013 at 9:11. Imdad. 5,874 4 4 gold badges 32 32 silver badges 53 53 bronze badges. especially the html code. Cooperation …

How can I combine multiple classes into a single one in SCSS?

First of as I mentioned in my comment, the values for those classes go from 0-5 , there’s no py-10 . And you can make use of the bootstrap file:

Here’s the reference: https://v4-alpha.getbootstrap.com/utilities/spacing/

Find the classes you need and copy their CSS styles and add them in a class of your own naming as:

You can make a class by the name of suppose: pymt-5

Html — Is it possible to combine classes in CSS?, Unless you use LESS or SASS ‘s ‘mixin’ features, there’s no real way in plain CSS to «inherit» other classes. The best you can do is apply all three classes to your DOM element. If your problem is that you have a ton of those classes already on a page and you want to add properties to all of them, you can do: .foo, .bar, .foobar < …

How to add multiple classes to span html

To specify multiple classes, separate the class names with a space, e.g. . This allows you to combine several CSS classes for one HTML element.

Html — How can I combine 2 CSS classes into one?, I’m working with bootstrap, and trying to get the right classes on various elements for appropriate layout on various devices. It seems for many, I want something like control-label col-md-2.So I can go through a couple dozen elements, and change them all, but then — what if I realize I really want col-md-9?I …

Источник

Combine CSS classes and styles

The class attribute in HTML can reference multiple CSS classes separated by a space (e.g. ).

If the CSS classes on some element depend on the viewmodel properties, you can use value binding expressions to calculate the class attribute value.

However, when you need to combine multiple CSS classes, the expression gets quite complicated. Imagine you have three properties in the viewmodel — IsBold , IsItalic and IsUnderline , and you need to apply the bold , italic and underline CSS classes to some element when these properties are true .

The expression would look like this:

Class-* property group

In DotVVM, there is a concept called property group. Basically, it is a group of properties with a common prefix (e.g. MyGroup- ).

For example, you can see this feature in the RouteLink where the Param- property group is used to define values of route parameters.

DotVVM includes a built-in property group with prefix Class- which can be used to combine multiple CSS classes.

Instead of the long expression, you can combine classes like this:

The div element will get a combination of the classes for all properties which evaluate to true . All these classes will be joined and appended to the class attribute. If any of the expression changes, the CSS class will be recalculated.

You can even combine the Class-something properties with the class attribute itself (e.g. when you have some classes you need to include in all cases).

" Class-italic="" Class-underline="" 

Style-* property group

DotVVM includes a built-in property group with prefix Style- . It can be used to combine multiple inline styles.

The number of use-cases for the Style- is rather limited when compared to Class- , since styling using CSS classes is preferred over styling using inline styles.

However, when the Style property is being set dynamically using JavaScript usage of the Style property group ensures that current style attributes are preserved. This is not the case when using a regular value binding, which replaces the entire style attribute with an evaluated value.

The div element will get all CSS attributes combined in single style attribute.

See also

Источник