Css style multiple ids

Use Multiple Ids for Divs in CSS

In XML, fragment identifiers are of
type ID, and there can only be a
single attribute of type ID per
element. Therefore, in XHTML 1.0 the
id attribute is defined to be of type
ID. In order to ensure that XHTML 1.0
documents are well-structured XML
documents, XHTML 1.0 documents MUST
use the id attribute when defining
fragment identifiers on the elements
listed above. See the HTML
Compatibility Guidelines for
information on ensuring such anchors
are backward compatible when serving
XHTML documents as media type
text/html.

Use multiple IDs for divs in CSS

#box-left a, #box-middle a, #box-right a text-decoration:none; 
color:#000000;
>

Each value on the comma separator list is a selector on its own, it is not combined with the next elements:

#foo, .class p, #bar p:first-child a something;
>

#foo something;
>

.class p something;
>

#bar p:first-child a something;
>

How to select multiple ids in CSS?

Use an attribute selector
on the id attribute:

[attr^=value] represents an element with an attribute name of attr and whose first value is prefixed by «value».

What is the best practice for merging multiple ids with a single class in css?

I have 3 ids: #example1 , #example2 , #example3 which all share the same css class: .carousel-container

Not 100% sure if you mean the element shares the class or if you mean the id has a child element with the class because your CSS code tells me you have a child element but the problem sounds like you have the one element sharing the same id and class so here is the solution for both.

The code below will be targeting the child element of #example1

#example1 .carousel-container

The code below will target the element with #example1 with a class of .carousel-container

#example1.carousel-container

So to target all the elements with an id of #example1 , #example2 , #example3 with a child element with the class of .carousel-container

#example1 .carousel-container,
#example2 .carousel-container,
#example3 .carousel-container display: flex; 
justify-content: center; 
align-items: center; 
flex-direction: column; 
text-align: center; 
bottom: 0; 
top: 0; 
left: 0; 
right: 0;
>

If you want to do something like your «tidy» version you’ll have to use a preprocessor like SASS / SCSS or LESS

Is it possible to have multiple ID selectors in CSS

To answer your question, it works cross browser, and what you wrote is correct. Only «More stuff» will be in red.

But it is not recommended to use ID’s for styling.
A nice reference to read more about this can be found here. The entire article is a great read by the way, if you want to learn more about writing good CSS!

The most important part of it, concerning IDs is:

• IDs can never be used more than once in a page.
• Classes can exist only once, or a million times in a page.
• IDs can often have their traits abstracted out into many reusable classes.
• An ID is infinitely more specific than a class.
• This means no amount of chained classes can override an ID.

Can a HTML element have multiple unique ID attributes?

Needed to know if an HTML element can have multiple attributes of ID’s

Short answer? No because the browser will only render the first one.

See this Fiddle, I can only target it in CSS using the first id that appears in the DOM. Try changing that CSS selector to use the second id , it won’t work.

That’s because it seems like the second ID is being disregarded by the browser, as this is the output HTML:

If you really need additional identifiers on an element, you should think about using either multiple class names or data attributes to correspond to additional data.

Reference multiple (different) Div Id’s using document.getElementById

The problem is that you’ve named both sets of functions the same thing. When you declare openNav the second time to show TTP, it replaces the first instance. An easy solution is to just declare two separate sets of functions, e.g.:

function openDoctrine() document.getElementById("doctrineNav").style.height = "100%";
>

function closeDoctrine() document.getElementById("doctrineNav").style.height = "0%";
>

function openTTP() document.getElementById("ttpNav").style.height = "100%";
>

function closeTTP() document.getElementById("ttpNav").style.height = "0%";
>

and reference them as appropriate, e.g.:

In short, you can’t reuse names in JavaScript (how should the engine know which function you’re referring to?), so use different names more specific to the different task.

How to access two Ids in one css selector

#buttons input:nth-child(2), #buttons input:nth-child(3) margin-left:5px;
>

With , seperation you start a complete new CSS Selector and combine them.

Источник

How to use multiple class & ID selectors in CSS?

CSS gives you huge flexibility to select one or more HTML elements exactly the way you want. Using multiple classes & IDs and making a combination of both gives you the ability to do that. But you have to know how multiple CSS selectors work together to get the most out of it.

In this post, I will show how you can use multiple classes & IDs in CSS, and make a combination of these two. Also, you’ll get some real-world code examples that will give you a clear concept of using them properly.

How to use multiple CSS classes & IDs?

Before learning how to do something, you should learn why you need to do it in the first place. It’s not only applicable for multiple classes or ID selectors but also for other things.

Why do you need multiple classes & IDs in CSS?

Well, you need them for many reasons but not only limited to:

• Selecting elements conditionally
• Changing/overriding CSS specificity
• Grouping elements together for the same styles
• Helps to follow the DRY (don’t repeat yourself) principle, etc

Now you knew the reasons for using multiple classes & IDs. Let’s see how to use them properly.

Imagine that you have two sections in your HTML markup as follows:

The first one has two classes .row & .banner and the second has only one class of .row

Now if you want to add different styles to these sections, you can select them separately. For the first section, you can select by .row.banner

And for the second section, you can select .row and add different styles to it. See the example CSS below.

Now it brings me to the next example.

If you take a closer look at the above CSS (first line), there is no space between .row & .banner

But if you add a space by mistake, the above styles won’t be applied to the first because it has a different meaning in CSS.

The space between the two classes means that the first CSS class is a container element of the second one.

To target or select the above that has a class of .banner , you have to specify it as I did below.

In the above selector, there is a gap between the .row & .banner and this is known as a descendant selector .

But if you want to select an element that immediately comes after another element (in the same level), you need to use an adjacent sibling selector. Not to mention, you can select the second div in the same vein (using a descendant selector) like this: .row .cta

However, there are some situations where you may not have an exact known class name but you need to select the immediately following first item. In this type of case, the adjacent sibling selector comes handy. For example, in the above HTML markup, you can select it like this: div + div .

Wrap up the concept of the gap between classes:

If there is no gap between two classes or among multiple classes, it means all the classes live in the same HTML element.

If there is a gap between two CSS classes, it means the first one is the containing HTML element of the second one. And the level could be one or more levels deeper. See the HTML below for more clarification.

In the above HTML, I have 3 different divs with different levels that have a CSS class of .unicorn

Now if you want to target all the divs with this class name, you can do it as you see below.

And the same styles will be applied to all HTML elements that have the class of .unicorn

Combination of CSS ID & class

CSS IDs are unique and you should try to use them once on a page because they have linking behavior. However, sometimes you may also need to use one ID multiple times on a single page for styling purposes. There is a debate in the developer community about using an ID one or multiple times. Most of their evidence is strong. So, I recommend using an ID only once if you’re using them as an anchor.

Anyways, you can combine CSS IDs & classes together as you did with multiple classes. Let’s see the following HTML markup.

If you want to target the second , your CSS selector will be like this:

It means applying the style on the HTML element(s) that has/have a class of .world which lives under the #hello ID. If you have multiple divs in the same level or deeper level, all these will be affected by the above selector. Let me give you another example to make you understand better.

Level 1
 
Level 2
 
Level 3
 
Level 4
 
Level 5
 
Level 6
 
 
 
 
Level 4
 
 
 
 

Based on the first selector #hello div , all the divs that come after the #hello will have a background-color: red; This style also applies to the .world class.

For the second selector, all the div/elements that have .world CSS class will have a background-color: green

Источник

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.

Источник