This question already has answers here:
Can the :not() pseudo-class have multiple arguments?
(5 answers)
Closed 7 years ago.
I have this weird situation that I cannot make work :not that has two condition. Basically
I want to hide all div in a container except those having specific class.
For example this is the html
<div id="container">
<div class="show"></div>
<div class="extra"></div>
<div class="about"></div>
<div class="sample1"></div>
.
.
.
<div class="sampleetc"></div>
</div>
Now my css expression is like this , but it is not working
#container > div:not(.show), #container > div:not(.about){
display:none;
}
Any ideas why it is not working or good css expression for this, i presume, :not does not work with two condition, or i am guessing the first expression already hide .about
I believe you can just chain the :not selector like this:
div#container > div:not(.show):not(.about)
{
display: none;
}
It appears to work correctly on this fiddle.
This is what you want. Hide all inside the container but div.show and the next one
#container > div:not(.show) + div{
display:none;
}
DEMO
Related
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 4 years ago.
<div class="tabs">
<div class="title">A</div>
<div class="title">B</div>
<div class="content">Something</div>
</div>
How can I select B title without restructuring my html, and there might be C, D, E and more title be added in. I tried below css it doesn't work
Use nth-child and nth-of-type selectors. Choose any of the below according to your needs.
Solution: 1
.tabs :nth-child(2){
color:red;
}
Solution: 2
.tabs .title:nth-child(2){
color:red;
}
Solution: 3
.tabs .title:nth-of-type(2){
color:red;
}
.tabs .title:nth-child(2) {
color : green;
}
This question already has answers here:
nth-of-type vs nth-child
(7 answers)
Closed 7 years ago.
Say I have the following -
<div>
<span>First</span>
<span>Second</span>
<span>Third</span>
</div>
Is there a way to use CSS to modify the style of each separately, without having to apply a unique class in each case?
For example, something like div span { color: blue; } but then apply a different colour to the subsequent span and so on?
(...and yes, I have tried many Google searches first!)
Try nth-of-type or nth-child:
span:nth-of-type(1) {
color:blue;
}
span:nth-of-type(2) {
color:red;
}
span:nth-of-type(3) {
color:green;
}
here is the code example
Hope you can help me with this CSS trick.
Basically what I need is this kind of CSS
if 'container' has sibling 'mySibling' {
#myDiv{
}
}
if 'container' has no sibling {
#myDiv{
}
}
For this HTML
<div id="mySibling"></div>
<div id="container">
<div id="myDiv"></div>
</div>
sibling sometimes will not be present, and I need different css for myDiv in these cases
Any help would be appreciated, I tried doing + and ~ selectors but I don't think I have proper logic.
You can do something like this:
#mySibling + #container #myDiv {
background-color:blue;
}
Here is a fiddle showing it off: http://jsfiddle.net/Lzq3S/
Note, I've changed the ids to classes in the fiddle just to show the two sets of div elements, but you get the idea...
This breaks down to myDiv that is a child of container that is a sibling of mySibling.
First off, make sure your html is correct; in your example, you forgot to specify whether you're using an id or a class! Possible options for your html:
<div id="container">
<div class="mySibling"></div>
<div class="myDiv"></div>
</div>
or
<div id="container">
<div id="mySibling"></div>
<div id="myDiv"></div>
</div>
For the sake of your example, we'll use id's, even though some would say it's better practice to use classes
Now for the CSS.
The + and ~ selectors operate in slightly different ways. The + selects adjacent siblings, while the ~ selects all siblings. Because CSS doesn't handle logic quite the same way as actual programming languages, you can't check to see if a container holds a certain element before applying styles, but you can use the sibling selectors to style elements that are next to certain other elements.
My suggestion:
.container #myDiv {
/* Your styles for #myDiv */
}
.container #mySibling + #myDiv {
/* Your styles for #myDiv it is next to #mySibling.
Will override the styles a */
}
You can check out an example here: http://jsfiddle.net/8r2TZ/. Note, I specified "myDiv" as a class, because I used it more than once, and my CSS reflects that.
If you do need to have a CSS rule for each case without relying on overriding, it's still possible, since there's a selector for elements with no siblings:
#mySibling + #container > #myDiv {
}
#container:only-child > #myDiv {
}
(You can even achieve compatibility with old IEs by using :first-child in lieu of :only-child since #mySibling comes first.)
This question already has answers here:
Is there any way to hover over one element and affect a different element? [duplicate]
(2 answers)
Closed 9 years ago.
im trying to write a code where you hover over a div and have a completely different div change its effect
heres my code
html
<div class="a">LOREM IPSUM</div>
<div class="boxhighlight"></div>
css
.a:hover, .boxhighlight
{
background-color:black;
}
what i want to happen is that when the user hovers over the word lorem ipsum, the div boxhighlight will change its background color
is there a way to do this?
thanks
Use like this
<div class="a">LOREM IPSUM</div>
<div class="boxhighlight" >asdf</div>
Your css
.a:hover ~ .boxhighlight {
background-color:black;
color: white;
}
See this for your Reference
See example in this Fiddle
Change the selector to this:
.a:hover + .boxhighlight {
background-color:black;
}
The selector changes the styles of the element that has class boxhighlight that next to .a when hovered.
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 7 years ago.
I'm making a gallery where when you hover over the main image, the thumbnails should become transparent. I would like to achieve this with pure CSS, but I'm not sure if that's possible.
CSS:
/* should affect thumbs but not main */
/* obviously this code wouldn't work */
#main:hover, #thumbs {
opacity: .5;
}
HTML:
<div id="main">
Hover over me to change #thumbs
</div>
<div id="thumbs">
I change when you hover over #main
</div>
Is this possible using pure CSS?
Sure, just use the adjacent sibling selector:
#div1:hover + #div2 {
...
}
An example here: http://jsfiddle.net/6BfR6/94/
Only children of a selector can be affected. Otherwise, you'll need to use javascript.
For instance:
div:hover #childDiv {
background: green;
}
#div1:hover + #div2 {
...
}
it works fine in IE 7, 8, 9 and 10. No need to any JS or onovermouse and NOT ONLY children of a selector can be affected.
Try the example Link of "Nightfirecat".
even if it is, it will not work in IE :)
i would suggest using onmouseover event
however it is nice question and I am curious if someone has solution of doing it cross-browser via css
I think you're going to need some javascript for that.
No. You would have to use Javascript.