I'm trying to apply background-color when a user mouse hover the element whose class name is "reMode_hover".
But I do not want to change color if the element also has "reMode_selected"
Note: I can only use CSS not javascript because I'm working within some sort of limited environment.
To clarify, my goal is to color the first element on hover but not the second element.
HTML
<a href="" title="Design" class="reMode_design reMode_hover">
<span>Design</span>
</a>
<a href="" title="Design"
class="reMode_design reMode_hover reMode_selected">
<span>Design</span>
</a>
I tried below hoping the first definition would work but it is not. What am I doing wrong?
CSS
/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover
{
}
.reMode_hover:hover
{
background-color: #f0ac00;
}
One way is to use the multiple class selector (no space as that is the descendant selector):
.reMode_hover:not(.reMode_selected):hover
{
background-color: #f0ac00;
}
<a href="" title="Design" class="reMode_design reMode_hover">
<span>Design</span>
</a>
<a href="" title="Design"
class="reMode_design reMode_hover reMode_selected">
<span>Design</span>
</a>
In modern browsers you can do:
.reMode_hover:not(.reMode_selected):hover{}
Consult http://caniuse.com/css-sel3 for compatibility information.
Method 1
The problem with your code is that you are selecting the .remode_hover that is a descendant of .remode_selected. So the first part of getting your code to work correctly is by removing that space
.reMode_selected.reMode_hover:hover
Then, in order to get the style to not work, you have to override the style set by the :hover. In other words, you need to counter the background-color property. So the final code will be
.reMode_selected.reMode_hover:hover {
background-color:inherit;
}
.reMode_hover:hover {
background-color: #f0ac00;
}
Fiddle
Method 2
An alternative method would be to use :not(), as stated by others. This will return any element that doesn't have the class or property stated inside the parenthesis. In this case, you would put .remode_selected in there. This will target all elements that don't have a class of .remode_selected
Fiddle
However, I would not recommend this method, because of the fact that it was introduced in CSS3, so browser support is not ideal.
Method 3
A third method would be to use jQuery. You can target the .not() selector, which would be similar to using :not() in CSS, but with much better browser support
Fiddle
Related
I am trying to change the position of a side panel that comes up when an option is being hovered over. Here is the code from chrome developer tools:
<nav id= "side_nav" class= "sidebar-bg-color header-side-nav-scroll-show">
<ul data-template= "nav-template" class= "sidebar-bg-color ps-ready ps-container" data-blind= "source: nodes">
<li class= "nav_trigger nav_open">
<div class= "sub_panel" style= "left: 50px;"> == $0
</div>
</li>
</ul>
</nav>
I just need to change that style left : 50px to 76px. The developer tools just have this attribute saved under element.style which I can't really target in my CSS file. Any help is appreciated!
I have tried to target by being really specific and ended up targeting the main panel and not the sup panel. Here is the code that I tried:
nav #side_nav, ul.sidebar-bg-color ps-ready ps-container, li.nav_trigger nav_open, div.sub_panel{
left : 76px;
},
Your CSS selector should be as shown below (according to the HTML you posted). Look at every detail: I deleted all commas and a few spaces. If an element has more than one class, you address it like div.class1.class2 (no spaces, but with a dot between the class names). Commas are used to list separate selectors for the same rule, not to indicate child elements as you did. To select an element which has as ID, you directly attach the ID to the element (Not nav #side_nav, but nav#side_nav).
nav#side_nav ul.sidebar-bg-color.ps-ready.ps-container li.nav_trigger.nav_open, div.sub_panel {
left : 76px;
}
If necessary, add !important after 76px (but before the semicolon).
You can use the syntax !important so then it will override all other formating of the type that you use the !important on. Learn more here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#!important
You can also use the span element in the HTML to make it even more specific with the CSS.
I'm working on a webpage and I have an issue, I've created a css function for my image
#my_linkedin {
background: url("../img/linkedin.png");
}
but my isssue is that when I'm calling the class in my HTML, the image doesn't appear.
<div class="col-lg-4 ml-auto text-center mb-5 mb-lg-0">
<a onclick="window.open(this.href,'_blank');return false;" class="my_linkedin" href="https://www.linkedin.com" target="_self"></a>
</div>
My file is called creative.css and I also have the same file but minified. The issue is that on the webpage, the css are coming from the minified file, so how can I import my css who's coming from the creative.cssplease ? Because I don't want to have to put it in the minified one.
Thanks.
In this case you can have 2 problems.
First - link just empty and it width and height are equals to 0. So you cant see you backdround.
Second - I can see that you are using #my_linkedin as a selector which means that you is searching by id, replace to .my_linkedin.
You want .my_linkedin { ... }. # is for writing styles to match elements with matching id="..." attributes. . is for classes.
Some errors here.
You are referring to a css rule, not function.
You are defining a css rule for a specific id, but on your html your element don't have an id, instead it have a class.
#someid {
color: red;
}
.someclass {
color: green
}
<p class="someid">BLACK</p>
<p class="someclass">GREEN</p>
<p id="someid">RED</p>
<p id="someclass">BLACK</p>
Your problem isn't related to whether or not the file is minified. Your selector applies to an element with id="my_linkedin, but your HTML doesn't have such an element. You can either change class="my_linkedin to id="my_linkedin" or you can change the CSS selector to read .my_linkedin
In CSS you don't call that a function. The #my_linked part is called a selector and the stuff inside the curly braces are called properties. Likewise, you can't call anything in CSS as you would in a programming language.
I have a quite interesting problem here.
I want to target elements that match two conditions at the same time, but I can not find the way
<div class='redLink'>
<!-- ... ... ... -->
<a href='#'>Link</a>
<!-- ... ... ... -->
</div>
<div>
<!-- ... ... ... -->
<a href='#' class='redLink'>Link</a>
<!-- ... ... ... -->
</div>
My ideal CSS would be
[*:not(.redLink) a] AND [* a:not(.redLink)] {
color:green;
/* i.e., color NOT red */
}
However, the operand , is just an OR (and, when it doesn't match one condition, it matches the other...!).
And the only AND I can find is the logical concatenation div#myDivId.someClass, though what I would like is something like [div#myDiv a].[div.someClass a]
My goal is to target ONLY those anchors <a/> that don't have the class .redLink and have no parents with the .redLink class eiher.
And, very important, the only thing I want to target is the final anchor, not the whole div or the whole element.redLink...
Thank you!
Unfortunately, you can't achieve this using a CSS selector with a single rule. Currently you can only target a elements without the class using a:not(.redLink).
It is not possible to target a elements that do not have any .redLink ancestors, because the :not() pseudo-class doesn't accept combinators (otherwise you would do a:not(.redLink a)). A selector like :not(.redLink) a wouldn't work either, because that targets a elements with at least one ancestor without the class, which is not the same as a elements that have no ancestors with the class.
For example if your structure looked like this:
<div class='redLink'>
<p>
<a href='#'>Link</a>
</p>
</div>
That p doesn't have the class, so :not(.redLink) a would match.
If you happen to have the option of using jQuery, though, $('a:not(.redLink, .redLink a)') will work, because :not() is much more permissive in jQuery than in CSS.
If you need to do this using CSS only, the easiest solution is to make all a elements green, then override it:
a {
color: green;
}
a.redLink, .redLink a {
color: red;
}
Maybe you can reverse the logic like this. Make every link green (if that is possible in your site) and make the specific links red again.
a {
color: green;
}
a.redlink,
.redlink a {
color: red;
}
Of course it depends on the structure and complexity of your site and the existance of other styling that might collide with this, but I would prefer a CSS-only solution like this over JQuery if it is reasonably possible.
I have some classes that are used for Styling and all of them display using block mode.. I would like to convert them all to inline.. Is there a simple way to convert them all to inline, instead of manually going to each class to convert them individually to inline...
Section of your code:
<div class="contentbody">
<p>
Register here!
</p>
<a href="{% url 'parent_register_step1' %}"
class="bbutton textshadowclass boxshadow">
<div class="boxshadowinset green">
Register
</div>
</a>
<p>
Forgot your password?
</p>
<a href="{% url 'parent_forgot_password' %}"
class="bbutton textshadowclass boxshadow">
<div class="boxshadowinset green">
Reset Password
</div>
</a>
</div>
I would like to change the classes bbutton, textshadowclass, box shadow, boxshadowinset green into inline.. What is the simplest way?
Note: This classes are used in other sections of the page. I would like to change the certain section to be inline only. It shouldn't affect the whole page...
Let me explain more in detail what i am doing:
I would like to convert this into inline such that the register and reset password appear on the same line...
To only select the classes that are instead the contentbody class, you need a CSS element>element Selector:
div.contentbody>.bbutton, div.contentbody>.textshadowclass, ... {
display: inline;
}
(add more classes to the list if you want others included as well)
Additional note: If you permanently need these classes to be inline, then I would suggest to just (once) going to each class and add an inline class to each element, this keeps your code clearer in the long run.
Edit:
use the union selector (sorry I cannot find a more official link) to select elements that have multiple classes set:
div.contentbody>.boxshadowinset.green {
display: inline;
}
Note the . (and no space) between boxshadowinset and green
I do believe this is supported by modern browsers, but IE6 does seem to have some problems with it.
One way is just to apply an id to your wrapping element.
<div class="contentbody" id="contentbody">
Then in your css, add the styling
div#contentbody a, div#contentbody div{ display: inline; }
Due to CSS Element Hierarchy, they will all take the inline style rather than their own style.
Basic example here. http://jsfiddle.net/H97c5/2/
I have a menu with links in the following form, in which I am trying to highlight the current menu item. I can't seem to get it working. Please advice as to what I am doing wrong
HTML
<body id="home">
<div id="topMenu">
<div class="nav-home" id="topMenuBlock"><p>Home</p></div>
<div id="nav-about"><p>About</p></div>
<div id="nav-rates"><p>Rates</p></div>
<div id="nav-faq"><p>FAQ</p></div>
<div id="nav-contact"><p>Contact</p></div>
<div id="nav-careers"><p>Careers</p></div>
</div>
<div id="rightTopMenu"></div>
</div>...other stuff</body>
Then for the CSS I have the following:
#home a.nav-home{ border-bottom:2px solid white; }
Do the links HAVE to be in a List, or can I leave them in div's, and if so, how can I make this work?
Thanks.
You've a little bit of a mess here.
Do the links HAVE to be in a List, or can I leave them in div's?
They don't have to be, but they probably should be. There's not good reason to use the strange markup you have chosen, you should definitely consider switching to a list and <li> tags.
Problem with duplicate ids
You have <body id="home"> and <a href="" id="home">
You also have several instances of id="topMenuBlock" (I see you fixed this in your edit.)
You cannot have more than one element with the same id. id attributes must be unique, always. Use class names instead, if anything.
You are using this selector: #home a.nav-home {} but it doesn't match anything. There is no <a class="nav-home">. You can use something like:
#home {} because that's the id of the <a> element you want
.nav-home a {} - Selects the <a> inside an element with class="nav-home"
Perhaps you have the concept of ids and classes mixed up. Ids are supposed to uniquely identify HTML elements, whereas classes can be used as many times as you like. Right now you have 6 elements with the id #topMenuBlock. You should make a .topMenuBlock class instead. I would also make a #nav-home id instead of a class since there should only be one such element on each page.
Secondly, there is no need for the <p> tags you have within your <a> tags. In fact, it's against HTML standards to do so since anchors are inline elements and paragraphs are block-level elements.
Lastly, your CSS selector that sets the border is incorrect because the .nav-home div is not contained within an <a> element. Use this CSS instead (assuming you change nav-home to be an id rather than a class):
#nav-home{ border-bottom:2px solid white; }
Fix these issues and then see what happens. If you're new to HTML and CSS, I would recommend going through some tutorials, such as the ones found at http://www.w3schools.com/.
Your class identifier should be in the <a /> tag
You have
<div class="nav-home" id="topMenuBlock"><p>Home</p></div>
but you want
<div class="something" id="topMenuBlock"><a class = "nav-home" href="" id="home"><p>Home</p></a></div>
Modify your CSS class accordingly.