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 3 years ago.
OK, simple question I know - but which of these is correct?
I am trying to hide this div:
<div class="notice important-message">
.notice .important-message {
display: none
}
or - classes joined together like this:
.notice.important-message {
display: none
}
.notice .important-message
would select the element .important-message in this case:
<div class=".notice>
<div class=".important-message"></div>
</div>
.notice.important-message
selects this:
<div class="notice important-message"></div>
so the second one would be correct.
Check this for more references.
Second is correct. You can also do div.class1.class2 {}
In this case 2 classes are on same node
<div class="notice important-message">
so to access this code you can use (without space)
.notice.important-message {
display: none
}
If these 2 classes are on parent child node
that is
<div class="notice">
<div class="important-message">
</div>
</div>
then you can use (with space)
.notice .important-message {
display: none
}
Try this
<div class="hide">
.hide {
display: none;
visibility: hidden;
opacity: 0;
}
Related
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 want to select the sections according to the item number.
:nth-child and :nth-of-type don't work for me. I can't select sections separately. I want to select section 1 and section 3 in my code below.
section:nth-of-type(1) {
color: red;
}
section:nth-of-type(3) {
color: aqua;
}
<section>section 1</section>
<section>section 2</section>
<div class="container">
<section>section 3</section>
<section>section 4</section>
</div>
<div class="footer">
<section>section 5</section>
</div>
But this method doesn't work properly.
Note: I want solution without javascript.
Try using nth-child(n) instead.
section:nth-child(1) {
color: red;
}
section:nth-child(3) {
color: aqua;
}
Using nth-of-type gets every other element while nth-child finds the specific item index.
give each section an id or a class
<section id="1">section 1</section>
This question already has answers here:
CSS Variables - Swapping values?
(1 answer)
Inverting colors with CSS Variables
(1 answer)
Closed 3 years ago.
Let's say I have two css variables, control-color and control-color-inverse. I want to make a <div> where all of the colours are inverted. But this doesn't seem to work properly:
* {
background-color: var(--control-color);
color: var(--control-color-inverse);
}
:root {
--control-color: gainsboro;
--control-color-inverse: black;
}
#child {
--control-color: var(--control-color-inverse);
--control-color-inverse: var(--control-color);
}
<div id="parent">
<p>not themed</p>
<div id="child">
<div id="grandchild">
<p>themed</p>
</div>
</div>
</div>
For example, in this snippet, div#child should have a black background with grey text. But it seems that I end up with a circular reference and it cancels out. How can I accomplish what I'm trying to do?
I think you can do this
#child {
background-color: var(--control-color-inverse);
color: var(--control-color);
}
or you can use other variable name
#child {
--child-control-color: var(--control-color-inverse);
--child-control-color-inverse: var(--control-color);
}
This question already has answers here:
Is there a CSS selector by class prefix?
(4 answers)
Closed 8 years ago.
Is it possible to use a "wildcard" for elements having a class name starting with a specific string in CSS3?
Example:
<div class="myclass-one"></div>
<div class="myclass-two"></div>
<div class="myclass-three"></div>
and then magically set all the above divs to red in one go:
.myclass* { color: #f00; }
The following should do the trick:
div[class^='myclass'], div[class*=' myclass']{
color: #F00;
}
Edit: Added wildcard (*) as suggested by David
It's not a direct answer to the question, however I would suggest in most cases to simply set multiple classes to each element:
<div class="myclass one"></div>
<div class="myclass two"></div>
<div class="myclass three"></div>
In this way you can set rules for all myclass elements and then more specific rules for one, two and three.
.myclass { color: #f00; }
.two { font-weight: bold; }
etc.
You can easily add multiple classes to divs... So:
<div class="myclass myclass-one"></div>
<div class="myclass myclass-two"></div>
<div class="myclass myclass-three"></div>
Then in the CSS call to the share class to apply the same styles:
.myclass {...}
And you can still use your other classes like this:
.myclass-three {...}
Or if you want to be more specific in the CSS like this:
.myclass.myclass-three {...}
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS Selector that applies to elements with two classes
I've got the following:
<div class="green-arrow current-plan span4">
<img src="/images/assets/green-arrow.jpg">
</div>
<div class="green-arrow plan-above span4">
<img src="/images/assets/green-arrow.jpg">
</div>
And I want to target plan-above so it's display: none; without affecting other instances of plan-above (which are not green-arrow).
div.green-arrow.plan-above {
display: none;
}
Try this:
div.green-arrow.plan-above {
display: none;
}
Further you can use CSS3 to excluded several classes comma seperated
div.plan-above:not(.class, #id) {
//mark up
}
This question already has answers here:
CSS Selector that applies to elements with two classes
(2 answers)
Closed 3 years ago.
Let's say we have this markup:
<div class="abc"> ... </div>
<div class="xyz"> ... </div>
<div class="abc xyz" style="width: 100px"> ... </div>
Is there a way to select only the <div> which has BOTH abc and xyz classes (the last one) AND override its inline width to make the effective width be 200px?
Something like this:
[selector] {
width: 200px !important;
}
div.abc.xyz {
/* rules go here */
}
... or simply:
.abc.xyz {
/* rules go here */
}
Below applies to all tags with the following two classes
.abc.xyz {
width: 200px !important;
}
applies to div tags with the following two classes
div.abc.xyz {
width: 200px !important;
}
If you wanted to modify this using jQuery
$(document).ready(function() {
$("div.abc.xyz").width("200px");
});
If you need a progmatic solution this should work in jQuery:
$(".abc.xyz").css("width", 200);