This question already has answers here:
What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)
(6 answers)
Closed 20 days ago.
I have other company's html, show three lines:
<div class="classA classB classC">A_display</div>
<div class="classB classC">B_no_display</div>
<div class="classC">C_no_display</div>
I need A_display display, and let B_no_display\C_no_display hide.
The classA, classB, classC's name is known and the class combination will not change.
Can I use CSS selector make it? Like using this css:
.classA .classB .classC{
/* todo how to display A_display, don't display B_no_display C_no_display*/
/* display: inline !important;*/
}
.classB .classC {
display: none;
}
.classC {
display: none;
}
Then the page show only one line:
A_display
Yes, CSS selectors can be used to hide specific elements based on their class combinations. The updated CSS code to achieve the desired result is as follows:
.classA.classB.classC {
display: block;
}
.classB.classC {
display: none;
}
.classC {
display: none;
}
This will make the A display element visible while hiding the B no display and C no display elements. CSS selectors check each element for the exact class combination, and the display property is used to show or hide the elements.
You have to remove the whitespace between class names like .classA.classB.classC
.classA.classB.classC {
display: inline !important;
}
.classB.classC {
display: none;
}
.classC {
display: none;
}
<div class="classA classB classC">A_display</div>
<div class="classB classC">B_no_display</div>
<div class="classC">C_no_display</div>
Related
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 3 years ago.
I would like to apply style on an element which is between 2 other elements (siblings) - see below - on the img which is between the label and input.
I can use the + operator for the selector of the siblings, but I want the style to be applied on the second element out of the three.
HTML:
<label class="field-name">XXXX</label>
<img class="validation-mark">
<input type="text" class="ng-invalid">
CSS:
label + img.validation-mark + input[type="text"].ng-invalid
{
display: inline !important; //I need this style to be applied on the img
}
You want to select the image, which is next to the label right?
If yes, you can use the adjacent sibling combinator selector:
An adjacent sibling combinator selector allows you to select an element that is directly after another specific element.
These selectors can help you apply styling in a contextual way.
label + img.validation-mark
{
display: inline !important; //I need this style to be applied on the img
}
If it's not the case or the specific requirement, I would suggest you to just select the image itself and apply the style to it:
img.validation-mark
{
display: inline !important; //I need this style to be applied on the img
}
Also, if you are using sass, like you tagged, you can do it like this:
img
{
&.validation-mark {
display: inline !important; //I need this style to be applied on the img
}
}
First thing, why don't you directly use class for applying styles.
.validation-mark{
display: inline !important;
}
And if you have to find 2nd element, you can also use JQuery.
$(label.field-name).next('img.validation-mark').css({'display': 'inline !important'});
Make it simple, it'll apply display: inline !important; on both image and input. Thanks
label + img.validation-mark,
label + img.validation-mark + input[type="text"].ng-invalid {
display: inline !important;
}
If you want to apply display: inline !important; only on img.
.validation-mark {
display: inline !important;
}
If you want to apply display: inline !important; only on input.
.ng-invalid {
display: inline !important;
}
If you want to apply display: inline !important; on all Elements.
label,
img,
label {
display: inline !important;
}
Unset css property in css. Is it possible?
Let me explain the problem with the css code.
We have two classes at hand: .whenRolledUp and .whenRolledDown.
I want my element to comply with the following rules:
1 When an element with .whenRolledUp class is positioned in DOM hierarchy and have an element with a class .rolledDown somewhere above itself in the hierarchy I would like to disable the element. Otherwise, I would like to do nothing to the display of the element. I am able to satisfy this with the help of this css:
.rolledDown .whenRolledUp {
display: none;
}
2 When an element with .whenRolledDown class is positioned in DOM hierarchy and have an element with a class .rolledDown somewhere above itself in the hierarchy I would like to do nothing to the display of element. Otherwise, I would like to have display: none for the element. I am able to satisfy the second part using this:
.whenRolledDown {
display: none;
}
But here is the catch. I can not satisfy the first part by just using this:
.rolledDown .whenRolledDown {
display: block;
}
Because here I am actually setting the display to block, while it may have a different value without this css.
It seems like the problem is impossible to solve with only css. Is it so?
You can use display: unset:
The unset CSS keyword resets a property to its inherited value if it
inherits from its parent, and to its initial value if not.
function add() {
document.querySelector('.target').classList.add('rolledDown');
}
.whenRolledUp {
display: none;
}
.rolledDown .whenRolledUp {
display: unset;
}
<div class="target">
<div class="whenRolledUp">whenRolledDown</div>
</div>
<button onClick="add()">Add rolledDown</button>
This question already has answers here:
How do I select an element that has a certain class?
(5 answers)
Closed 4 years ago.
For an HTML element like this:
<div class="cas"></div>
...can you use an element before the CSS, like this:
div.cas {
}
...or like this?:
.cas {
}
Or either way?
Yes, either way, depending on your context.
div.cas selects any <div> element with class "cas".
.cas selects any type of element with the class "cas".
For example:
.test1 {
background-color: lightgreen;
}
p.test1 {
color: white;
}
div.test2 {
background-color: lightblue;
}
p.test2 {
color: red;
}
<div class="test1">DIV TEST1</div>
<p class="test1">P TEST1</p>
<div class="test2">DIV TEST2</div>
<p class="test2">P TEST2</p>
See CSS selectors.
Using the class selector will select that element, and others with the same class.
Adding the tag to the selection (div.cas) will only select divs with that class.
Both will work, so either.
This question already has answers here:
Including another class in SCSS
(6 answers)
Closed 8 years ago.
I have a certain question about applying styles to an element through another CSS class. To be more specific, lets have a look at following. I have div:
<div class="main"></div>
with some styles:
.main {
background: red;
display: inline;
/* some other styles */
}
and I want to apply .another class to the div, but via its .main CSS.
.main {
background: red;
display: inline;
.another
}
.another {
width: 50px;
height: 100px;
}
I assume that a preprocessor (SASS, Compass, etc.) is needed, but can someone advice if this is possible and what to keep in mind?
Thanks
You can assign multiple class to that div. so you can write like this and can apply class.
<div class="main another"></div>
No preprocessor is needed, you can group classes with .class.another, that's the same thing that css preprocessors does.
You can just add multiple classes in html, like <div class="main another and-other">...</div>. In css, you can just group the selectors, the inline order doesn't matter, but it's recommended to use most used class (main) first, and add more specific classes lower. But the order from top to bottom matters, lower in file the selector is, more important it is.
I've created a jsfiddle from your code, take a look. I've added background color so you see the difference, because width and height does not apply to inline elements.
You can merge the two styles like:
.main.another {
background: red;
display: inline;
width: 50px;
height: 100px;
}
I am using a stylesheet that looks a bit like this:
.base-slider {
width: 100%;
.ui-state-default {
border: none;
}
.ui-state-default:nth-of-type(1) {
background: url('left-end-arrow.png');
}
.ui-state-default:nth-of-type(2) {
background: url('right-end-arrow.png');
}
/* loads of other style stuff */
}
.secondary-slider {
.ui-state-default {
background: url('single-point-arrow.png');
}
}
Then in my html I have something like:
<div id="slider" class="base-slider secondary-slider">
X
</div>
The problem I have is that I am seeing the 'left-end-arrow.png' on my secondary-slider element rather than the 'single-point-arrow.png' which is what I was expecting
I am guessing that is because nth-of-type(1) makes the base-slider selector more specific than the child one. Is this correct? And if so, is there any CSS way to say "ignore any previously added pseudo-classes on this element"?
You could use :nth-of-type(n) to override the previous pseudo classe styles like this :
DEMO
.secondary-slider .ui-state-default:nth-of-type(n) {
background: url('single-point-arrow.png');
}
OR
You can make the second CSS style more specific as you have two calsses on your container, you can use both like this :
DEMO
.base-slider.secondary-slider .ui-state-default {
background: url('single-point-arrow.png');
}