Css class multiple selectors

Multiple classes for an HTML element

More than one classes can be applied on one element. In the following example, there are two individual classes that are applying CSS properties to an HTML element.

Example

Both of the above given classes can be applied on an element that have class=»textColor designMe» as attribute. There mmight be more than one calsses for an element.

If two classes are being applied on one element, we should not use two «class» attributes rather theses classes must be concatenated with a space in «class» attribute.

And we have seen in this section that how individual classes are applied on one HTML element. And now we’ll see the effect of multiple classes selector for an HTML element.

Multiple classes selector for one element

In this section we’ll see how a class selector with multiple classes affect an element. Two examples are given below. Only the first one is the exmple of «multiple classes selector».

Example1

There is no space between two classes.

Example

In this example, the classes select only those elements that have class=»one two» necessarily.

Example2

The following example is not the same as the above one. This example has been given to make the previous example more clear to understand. There is space between two classes.

Example

In this case, the classes select only those elements that have class=»two» and its parent element must have classs=»one» attribute.

Classes affecting the same properties of an element

And now we see if multiple classes are affecting the same properties of an element, which one of them will dominate?

The answer is simple. The last class in the document tree will dominate and it does’t matter whether you place the class name at the start of end in the «class» attribute.

Example

In the above example, .second class will dominate in any case because it is placed at the end of the tree of classes.

Was this article helpful?

Источник

CSS Multiple Class Selectors

Using multiple class selectors for applying styles to elements is a powerful approach. There are practical use cases when using a single selector is not enough, or adds lesser value than it adds. In this article, we will observe how multiple selectors enhance our style code in a real-life example.

Note that this article is about using multiple class selectors, not combinators. An example of multiple selectors is .class1.class2 — which targets an element having both, class1 and class2, classes. On the other hand, .class1 > .class2 is a combinator that targets all the direct children (not all descendants) of .class1 with the .class2 applied.

Let’s consider that you are tasked to build a file-sharing UI. It offers the following basic features

Both the files and recipients are represented as a grid of icons. Once a file/member is selected, its icon should be styled with a specific design to represent the selection. Both the icon types have different appearances and are required to have different selection styles.

We can use one class .icon to style the default appearance and another class .selected . But the problem is, the icons have different default and selected state styles. Multiple class selectors solve this issue smoothly. We can separate the styles as .file-icon.selected and .recipient-icon.selected rules.

The following codepen demonstrates such a UI and styles. Multiple class selector styles have been placed at the top of styles for emphasis. The general details of the implementation of this UI are out of the scope of this article. Interested readers can go through the codepen to get to know how it has been built.

 
 
Select Files
 
 
Select Recipients
 
 

/* Multiple Selectors Demonstration */ span.file-icon:not(.selected):hover, .file-icon:not(.selected):hover .page-turn < border-color: lightgreen; >.file-icon:not(.selected):hover .line < background-color: lightgreen; >span.file-icon.selected < background-color: lightgreen; >.avatar:not(.selected):hover < border-color: lightgreen; >.avatar.selected .head, .avatar.selected .body < background-color: lightgreen; >/* UI styling */ * < font-family: sans-serif; margin: 0; padding: 0; >body < background-color: rgba(72, 171, 224, 0.15); display: flex; justify-content: center; align-items: center; height: 100vh; >.file-sharing-card < display: flex; justify-content: space-around; align-items: center; text-align: center; background-color: white; width: 80%; height: 80%; padding: 10px; border-radius: 15px; box-shadow: 0px 0px 15px 9px lightgray; >span.file-icon < position: relative; box-sizing: border-box; display: inline-block; height: 20vh; width: 16vh; margin: 5px; border: 2px solid black; border-radius: 5px; border-top-right-radius: 20px; cursor: pointer; >.file-icon .page-turn < display: inline-block; height: 35%; width: 30%; position: absolute; right: 0; border-left: 2px solid black; border-bottom: 2px solid black; >.content-lines < display: flex; flex-direction: column; justify-content: space-between; position: absolute; top: 50%; left: 25%; width: 50%; height: 30%; >.content-lines .line < height: 1px; background: black; >.avatar < display: inline-block; position: relative; display: inline-block; height: 20vh; width: 20vh; margin: 5px; border: 2px solid black; border-radius: 50%; cursor: pointer; >.avatar .head < display: inline-block; position: absolute; display: inline-block; height: 30%; width: 30%; border: 2px solid transparent; border-radius: 20px; top: 13%; left: 50%; transform: translateX(-50%); background: #48abe0; >.avatar .body

Multiple CSS class selectors add further value when the states of different elements have partially shared styles. Instead of repeating the style code, we can share the overlapped ones and override the unique ones. Let’s demonstrate this using an example.

Let’s assume we are building a set of messages with highlighted text content that looks like the following:

This text has an important Random message

This text has an important Success message.

This text has an important Warning text.

This text has an important Error message.

Our requirements are as follows:

• The highlighted text should be bold and large
• Normal text will be highlighted as blue. Success, Warning, Error states will have Green, Yellow/Gold, Red colors respectively

We quickly note that our normal important texts have a large font-size and blue color.

Moving on, we notice that the success, warning, and error texts share the same font size although different colors. Instead of creating a separate class as important-success and repeating the styles besides the unique color, we can share overlapped styles and override unique ones using multiple class selectors.

.important.success < color: green; >.important.warning < color: gold; >.important.error

This is a basic example with very few properties. But in real-world codebases, this value addition can save large amounts of code from duplication.

Conclusion

CSS offers a very powerful targeting approach using multiple class selectors. This approach allows easy segregation of styles for different elements while reusing the names of classes. This is particularly handy if the desired name represents a generic state (such as .selected in the above example) but the style requirements are different. It adds even more value when we need to share some styles across multiple elements.

UnusedCSS helps website owners remove their unused CSS every day. See how much you could save on your website:

You Might Also Be Interested In

Источник

Multiple Class / ID and Class Selectors

They look nearly identical, but the top one has no space between #header and .callout while the bottom one does. This small difference makes a huge difference in what it does. To some of you, that top selector may seem like a mistake, but it’s actually a quite useful selector. Let’s see the difference, what that top selector means, and exploring more of that style selector. Here is the “plain English” of #header .callout :

Select all elements with the class name callout that are decendents of the element with an ID of header.

Maybe this graphic will make that more clear:

Combinations of Classes and IDs

The big point here is that you can target elements that have combinations of class es and ID s by stringing those selectors together without spaces.

Target an element that has all of multiple class es. Shown below with two class es, but not limited to two.

We aren’t limited to only two here, we can combine as many class es and ID s into a single selector as we want.

Although bear in mind that’s getting a little ridiculous. Learn more about how to select IDs, classes, and multiple classes at DigitalOcean.

So how useful is all this really? Especially with ID s, they are supposed to be unique anyway, so why would you need to combine it with a class ? I admit the use cases for the ID versions are slimmer, but there are certainly uses. One of those is overriding styles easily.

Or perhaps prefacing the selector with something even more specific. More useful is multiple class es and using them in the “object oriented” CSS style that is all the rage lately. Let’s say you had a bunch of div s on a page, and you used multiple various descriptive class names on them:

They all share the class “box”, which perhaps sets a width or a background texture, something that all of them have in common. Then some of them have color names as class es, this would be for controlling the colors used inside the box. Perhaps green means the box has a greenish background and light green text. A few of them have a class name of “border”, presumably these would have a border on them while the rest would not. So let’s set something up:

.box < width: 100px; float: left; margin: 0 10px 10px 0; >.red < color: red; background: pink; >.blue < color: blue; background: light-blue; >.green < color: green; background: light-green; >.border

Cool, we have a good toolbox going here, where we can create new boxes and we have a variety of options, we can pick a color and if it has a border or not just by applying some fairly semantic class es. Having this class name “toolbox” also allows us to target unique combinations of these class es. For example, maybe that black border isn’t working on the red boxes, let’s fix that:

Based on this demo page.

Also important to note here is that the specificity values of selectors like this will carry the same weight as if they were separate. This is what gives these the overriding power like the example above. Learn more about specificity in CSS at DigitalOcean.

All good current browsers support this as well as IE back to version 7. IE 6 is rather weird. It selects based on the last selector in the list. So “ .red.border ” will select based on just “ .border “, which kinda ruins things. But if you are supporting IE 6, you are used to this kind of tomfoolery anyway and can just fix it with conditional styles.

Источник