This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
Closed 3 years ago.
I can't combine these selectors into a single CSS rule. I'm trying to edit the width of certain form fields.
input#input_9_2 {
max-width: 500px;
}
input#input_9_3 {
max-width: 500px;
}
When I try to combine them, the rule does not apply to either. But they work when written separately, as above.
To group CSS selectors in a style sheet, you use commas to separate multiple grouped selectors in the style. In this example, the style affects two classes input#input_9_2 and input#input_9_3.
input#input_9_2,
input#input_9_3
{
max-width: 500px;
}
The comma means "and", so this selector applies to all input#input_9_2 elements and input#input_9_3 elements. If the comma were missing, the selector would instead apply to all input#input_9_3 elements that are a child of an input#input_9_2. That is a different kind of selector, so the comma is important.
Any form of the selector can be grouped with any other selector.
use a selector list
input#input_9_2, input#input_9_3 {
max-width: 500px;
}
Related
This question already has answers here:
Select elements by attribute in CSS
(6 answers)
Closed 1 year ago.
Here's the link to css code I am curious about : https://codepen.io/charlesxiao/pen/NWjgQQm.
Do you know what does the following css code means?
.awesome[data-sizing="intrinsic"] {
width: min-content;
}
What's this data-sizing attribute? I can't find it anywhere.
Thanks!
Much like how your selectors can target classes (.class) and ids (#id), your CSS can also target attributes, including data-*. It's common practice for javascript to target data-* attributes rather than going through the rigmarole of adding/removing classes. There's some particulars choosing between the two.
width: min-content; simply sets the element to the smallest possible size — the word "awesome" is the largest element and that's used as the width.
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 2 years ago.
I have a table (with id table) where each row has the attribute data-tagged, when created (by JS) it is set to "true", and can be set to "false" by various functions. I am using the following CSS to hide rows for which the data-tagged attribute is "false":
#table tr[data-tagged="false"] {
display: none;
}
And I was using the following CSS to produce a 'zebra-striped' effect, i.e: giving alternating rows a different background colour:
#table tr:nth-child(even) {
background-color: var(--other-background);
}
...until I realised that the row's colours were unchanged as other rows were hidden and un-hidden, which makes sense, since it's still only the even children that are affected by the CSS, so I tried the following selector instead:
#table tr[data-tagged="true"]:nth-of-type(even) { ... }
...thinking that this would only affect every other tr with attribute data-tagged equal to "true" (the desired outcome!), but I was wrong, and it made no difference. Is this not do-able in the CSS alone, or is there a solution that I'm not seeing?
Maybe try:
#table tr:not([data-tagged="false"]):nth-child(even){background:#fff;}
#table tr:not([data-tagged="false"]):nth-child(odd){background:#eee;}
This question already has answers here:
When to use the !important property in CSS [duplicate]
(13 answers)
How are the points in CSS specificity calculated
(7 answers)
Closed 5 years ago.
Do I need to add !important to all properties in the media queries I've written for my site like in the example below?
I had the CSS below at the bottom of my stylesheet, but I found that these properties did not reflect my design until I added the !important tags. I understand that using the !important tag is not best practice.
CSS
.loginbar {
padding: 20px;
}
.logo {
display: inline-block;
}
#media screen and (max-width: 1042px) {
.loginbar {
padding: 10px !important;
}
.logo {
diplay: none !important;
}
}
HTML
<div class=".logo"></div>
<div class="loginbar">Log In | Sign Up</div>
In theory, no - you don't need the !important flag. The issue you are probably experiencing arrises from specificity:
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors
Mozzila
The basic math (hugely simplified) behind specificity is a weighted approach.
id is worth 100,
class is worth 10,
tag is worth 1.
Therefore a.class (tag + class = 11) is less specific that a#id (tag + id = 101).
CSS is also applied in a last-match-wins format, that is to say that the style for the last declared selector that matches will be applied (sorted according to the above specificity).
So - in your example, it could be that there are elements on you page with the class .element which is being targeted with a more specific selector (such as .container div > ul li + li .element (which is a lot more specific than just .element) so the styles from that is overriding the styles from your media style.
The caveat to this, is if the !important flag is being used. In which case the only way to override the styles is to supply the !important flag again.
This question already has answers here:
Specifying a list of arbitrary children (no pattern) for nth-child and nth-of-type
(2 answers)
Closed 6 years ago.
How can I sum these css selectors together?
td:nth-child(1), td:nth-child(4), td:nth-child(5) {
font-size: 25px;
}
I thought of something like
td:nth-child(1,4,5) {
font-size: 25px;
}
but this doesnt work. Is there a way to condense this?
If you can't use a an+b formula to target them (which is the case in your particular example), then the code you wrote is the shortest version.
If you wish to simplify the CSS code, you could switch to classes... that however will make your HTML less clean.
This question already has answers here:
CSS select multiple descendants of another element
(3 answers)
Closed 9 years ago.
Is there a better way than this to select the elements with classes options OR inputs that are descendants of #height without selecting any elements with those classes that are not descendants of #height?
#height .inputs, #height .options
The #height seems redundant but #height .inputs,.options selects all the class="options" on the page, not just those descended from #height.
Nope, that's just how CSS is designed, and it's one of the reasons I use LESS CSS on all of my projects now. With LESS, you can structure your CSS more like JavaScript by nesting selectors. For example:
#height {
.inputs, .options {
/* properties */
}
}
metadept is absolutely correct. The comma is separating your selectors, and since you aren't specifying that you want the .options that are children of #height, it will target every element with the class .options on the page.
LESS CSS is a great tool to use; you may also want consider SASS - it just boils down to what you're more comfortable with.