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
}
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:
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;
}
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:
Complex CSS selector for parent of active child
I want to match a with id "breadCrumb" only if it has a child span id "userName".
Match:
<div id="breadCrumb" class="nav">
<span id="userName">esac</span>
</div>
But not match:
<div id="breadCrumb" class="nav">
<span id="navtrail">...</span>
</div>
I want to set #breadCrumb { display: none; }, but I don't want to hide it in the second case.
Firstly, these two elements aren't on the same page are they? If so it's invalid HTML as you can't (shouldn't) duplicate IDs.
You can't do this with straight CSS. My advice would be to restate the problem:
<div id="breadCrumb" class="nav userName">
<span>esac</span>
</div>
or
<div id="breadCrumb" class="nav navtrail">
<span>...</span>
</div>
then you can do things like:
#breadCrumb.navTrail { display: none; }
or
div.nav.navTrail { display: none; }
Applying multiple class selectors (previous example) isn't supported in IE6.