This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 4 months ago.
I'm trying to add the same styling to multiple classes, including a nested SASS class like so
.class1,
.class2,
.class3,
.class4.class4child,
.class5 {
background: #FFF;
padding: 3.2rem;
border-radius: 0.8rem;
}
I'm hoping class4.class4child will inherit these properties, but this implementation doesn't seem to work. (class1,2,3,5 all work here)
edit: Not a duplicate of this question, as I was not aware of both syntax.
Replace
.class4.class4child,
which only applies to elements that have both classes, with
.class4 .class4child,
which applies to elements with class="class4child" which are descendants to an element with class="class4".
Related
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;
}
This question already has an answer here:
Selecting the last element among various nested containers
(1 answer)
Closed 4 years ago.
I have nested class like below
I need to access the last mat-nested-tree-node class, i tried like below
.mat-nested-tree-node:last-child ul {
border-left: 1px solid white;
margin-left: -41px;
}
But it is applying styles to all mat-nested-tree-node classes. How can i select only the last child?
This is my editor url https://amarrkydlnk.angular.stackblitz.io
Any help would be appreciated!
If you want to target a child of a div you can do it like .mat-nested-tree-node > .mat-nested-tree-node-child > .mat-nested-tree-node-child-next{} and so on and so on.
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:
How do I select an element only when inside another element?
(3 answers)
Closed 6 years ago.
when i use this:
b, strong { color: black;}
It applies to the whole website.
I want to set the black color only in a div named "div1", how can i do it?
my div's default class name is "sidereportleft", i've applied this code, but still not working:
http://pastebin.com/JA5JXuNe
Given that your div has a class of div1, you could do it easily by:
.div1 b,
.div1 strong {
color: #000;
}
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)
(6 answers)
CSS Selector that applies to elements with two classes
(2 answers)
Closed 8 years ago.
I know when there is a space in between, it will look for the class on the right within the class on the left.
.classA .classB {
...
}
However, what does it look for when there is no space?
.classA.classB {
...
}
The first example (space-separated classes) is a parent-child relationship. .classB is found inside .classA.
<div class="classA">
<div class="classB"></div>
</div>
The second is for one element with multiple classes, like so:
<div class="classA classB"></div>
Very different situations, but both extremely useful!
Further reading here:
css select an element with 2 class
http://css-tricks.com/multiple-class-id-selectors/
It's used when you need an element, with both classes.
<div class="classA classB"></div>
would match
.classA.classB{}
See also:
http://css-tricks.com/multiple-class-id-selectors/
In the first example .classA .classB you're selecting elements with the class classB that are descendants of elements that have classA.
In the second example .classA.classB you're selecting elements that have both classes classA and classB.