Is it possible to add conditional formatting to change class on using hover effect on a div:
.resize:hover {
height: 360px;
z-index: 1;
.font_white {
color: blue;
}
}
.font_white{
color: white;
}
Is it possible to override font_white while hovering div with resize class? These classes are independent div's.
No it's not, not using pure CSS that is.
You can use JS, but without the code of your markup, it's hard to say what the best way is.
(Of course, if the font color is to be applied inside the div you hover, it is doable using CSS only, although not the way you describe it. But I assume you want to trigger style changes across the page by hovering a div.)
There is no generic way to achieve that with CSS.
If you can write a selector that matches both the element that is a member of the resize class and the element that is a member of the font_white class (which you would do using a combinator such as descendant, child or sibling) then you can use the combinator to achieve it.
For example:
.resize:hover ~ .font_white { ... }
would work if your HTML looked something like:
<button class="resize">Hover Me</button>
<section id="first">...</section>
<section id="second" class="font_white">...</section>
<section id="third" class="font_white">...</section>
You would need to select apropriate combinators for your particular HTML.
If you rewrite your CSS, you'll see that your desired effect is possible - and achievable without redefining the style declarations of your class.
Example:
.primary-text {
color: white;
}
.resize:hover {
height: 360px;
z-index: 1;
}
.resize:hover .primary-text {
color: blue;
}
Related
The following is meant to toggle stylesheets:
body.light {
background: var(--bg);
color: var(--text);
& a {
color: var(--link_color);
}
}
body.dark {
color: var(--bg);
background: var(--text);
& a {
color: white;
}
}
This snippet is in the last loaded file, amongst a few CSS files.
Problem: while the attributes are executed properly, the nesting for the selectors is not being picked up (It was expected the ampersand was the proper way to go).
There is a framework CSS file (loaded before the file where this code is placed) and it is those attributes that are executed.
What are the syntactic requirements to run properly nested selectors (be they native tag selectors (such as `a) or user-defined selectors?
update
The theme is being generated via a cookies[:theme]
and the body tag adopts it this way:
<body class="<%= cookies[:theme] %>">
To make it work in regular CSS, rewrite without use of &.
Exmaple:
body.light {
background: var(--bg);
color: var(--text);
}
body.light a {
color: var(--link_color);
}
body.dark {
color: var(--bg);
background: var(--text);
}
body.dark a {
color: white;
}
Regarding the ampersand, according to Sass document:
The parent selector, &, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways, like adding a pseudo-class or adding a selector before the parent.
Currently, usage of & will require a css preprocessor like Sass, and also the & is widely adopted by many syntax such as Sass, SCSS, Less.
CSS nesting is not possible with standard CSS but only with CSS preprocessors like Sass and Less.
Caniuse.com says
CSS nesting provides the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule. Similar behavior previously required a CSS pre-processor.
but the page does not shows any supported browser.
There are some more information on developer.chrome.com. The examples use the > character.
This is because, you used Sass in your project. Sass is a preprocessor scripting language that compiled into CSS. Sass reduces repetition of CSS and therefore saves time.
Let say you have this kind of HTML.
<div class="parent">
parent
<div class="child">
child
<div class="container desc">container</div>
</div>
</div>
assume you need these requirements, you need to make container class to add background to green. and desc class to width 500px.
you can do this by,
.parent {
.container {
background: green;
&.desc {
width: 500px;
}
}
}
One Note, In order to use Sass, you have to enable it from your project.If you use Angular,Vue or React, use
npm i sass
I hope this make sense to you.
I was just playing around with CSS and noticed an interesting scenario for which I couldn't really find an explanation. Maybe some of you have the answer for this.
I have a div element with an inline styling
<div id="text-sample" style="overflow:hidden;">This is a sample text to test the CSS behavior of inline styling</div>
My CSS
#text-sample {
width:200px;
white-space: nowrap;
}
#text-sample:hover {
overflow:visible
}
Here the hover effect is not applying. That is, the overflow: visible rule is not taking.
Note: Moving the overflow:hidden from inline style will fix the issue.
I'm looking for the reason why hover effect is not applying. Can anyone explain this scenario?
All else being equal, inline styles take precedence over styles applied via stylesheet rules. In your case, when hovering, the overflow: visible is invoked via the stylesheet rule, but that cannot override the inline style. If necessary, you could try !important.
#text-sample {
width: 200px;
white-space: nowrap;
}
#text-sample:hover {
overflow: visible !important;
}
<div id="text-sample" style="overflow:hidden;">
This is a sample text to test the CSS behavior of inline styling
</div>
But it would be easier simply to specify overflow: hidden in the #text-sample stylesheet rule, instead of giving it inline.
Your inline style will always override your external CSS.
You can use !important in :hover
#text-sample {
width:200px;
white-space: nowrap;
}
#text-sample:hover {
overflow:visible!important;
}
Inline styles take precedence over style sheets. There are two ways to change that: using JavaScript or using !important in the style sheet.
#text-sample:hover {
overflow:visible !important;
}
In CSS, there's something called Specificity. Simply said, something like
#id { color: red; }
would take precedence over something like
.blue { color: red; }
when having something like <div id="id" class="blue">. See example below.
This is because an ID selector (#) is interpreted as more important than a class. In the same manner, an equally specific selector with a later declaration (later in the file) takes precedence and the more specific your selector gets, the more important it is.
For your example: An inline-style takes precedence over anything written in a CSS file (unless using !important). I believe the :hover does not change anything on that fact.
For the detailed rules look my link above.
div {
width:200px;
white-space: nowrap;
}
#text-sample:hover,
#sample-2:hover {
overflow:visible;
}
#sample-2 {
overflow: hidden;
}
#foo {
color: red;
}
.blue {
color: blue;
}
<div id="text-sample" style="overflow:hidden;">This is a sample text to test the CSS behavior of inline styling</div>
<div id="sample-2">This is a sample text to test the CSS behavior of inline styling</div>
<div id="foo" class="blue">foo</div>
EDIT
As mentioned in comments, Specificity does not apply to inline styles. Nevertheless, inline styles are taking precedence over anything in a CSS declarations in files. However, as soon as you move the rule into the same CSS file (as you mentioned will work), the :hover is more important than the other rule since it is more specific in the moment you're hovering.
I have always wonder why this wouldn't work as it would make so much sense.
CSS:
#button1:hover {
background: green;
#button2 {
background: red;
}
}
HTML
<button id="button1"></button>
<button id="button2"></button>
If I hover over Button1, Button2's background should also change.
Is there a workaround to this other than the use of Javascript?
You can use the adjacent selector,
#button1:hover {
Background: green;
}
#button1:hover + #button2 {
Background: red;
}
Have a look at all the css selectors: http://css-tricks.com/almanac/
Oh by the way it's only possible to apply css on hover to elements after the hovered element. Parent elements and elements before the hovered element cannot be styled with css on hover. It's a limitation of css.
This can be done but CSS lacks the ability to provide powerful conditional statements. However if you look into SASS CSS LESS it is starting to happen.
You may have multiple classes on an element separated by a space:
<div class="header contaminated">...</div>
and you can target that div using .header.contaminated selector.
That's fine when both classes are directly applied to an element. i want to target an element with CSS that has both styles, but one style comes from the parent:
Example
<div class="contaminated">
<div class="header">...</div>
</div>
Normally i want to style a header as blue:
.header { background-color: #99FFFF; }
But if a div is contaminated then i color the entire background red:
.contaminated { background-color: Pink; }
.contaminated.header { background-color: HotPink; }
Except i don't think the css selector syntax .contaminated.header is valid for "inherited" styles.
Note: The reason i don't think it's valid is because it doesn't work
Is it possible to target an element with CSS if it only contains two classes, and some of the classes are "inherited" ?
jsFiddle sandbox
This is basic CSS - separate the class names by a space, that implies/applies the cascade:
.contaminated .header { ... }
Anything wrong with that?
Cheers
I'm confused as to your question, wouldn't this do it?
.contaminated .header { background-color: HotPink; }
Notice the space, saying "look for an element with a class of .header within an element with a class of .contaminated"
.contaminated>.header{}
will only target element header that are direct children of .contaminated
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
How do I prevent CSS inheritance?
Is there a way to declare the CSS property of an element such that it will not affect any of its children or is there a way to declare CSS of an element to implement just the style specified and not inherit any of the style declared for its parents?
A quick example
HTML:
<body>
<div id="container">
<form>
<div class="sub">Content of the paragraph
<div class='content'>Content of the span</div>
</div>
</form>
</div>
</body>
CSS:
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
Under normal circumstances one would expect the text block "Content of the paragraph" and "Content of the span" will both be 12px and bold.
Is there a property to include in the CSS above in the "div.content" block that will prevent it from inheriting the declaration in the "#container form div" block to limit the style to just "content of the paragraph" and spare "Content of the span" including any other children div?
If you are wondering why, well, I created a particular CSS file that gives all the forms on my project a particular feel and the div elements under the form all inherit the feel. No problem. But inside the form I want to use Flexigrid but flexigrid inherits the style and it just looks useless. If I use flexigrid outside the form and such it won't inherit the forms css, then it looks great. Otherwise it just looks terrible.
Unfortunately, you're out of luck here.
There is inherit to copy a certain value from a parent to its children, but there is no property the other way round (which would involve another selector to decide which style to revert).
You will have to revert style changes manually:
div { color: green; }
form div { color: red; }
form div div.content { color: green; }
If you have access to the markup, you can add several classes to style precisely what you need:
form div.sub { color: red; }
form div div.content { /* remains green */ }
Edit: The CSS Working Group is up to something:
div.content {
all: revert;
}
No idea, when or if ever this will be implemented by browsers.
Edit 2: As of March 2015 all modern browsers but Safari and IE/Edge have implemented it: https://twitter.com/LeaVerou/status/577390241763467264 (thanks, #Lea Verou!)
Edit 3: default was renamed to revert.
Can't you style the forms themselves? Then, style the divs accordingly.
form
{
/* styles */
}
You can always overrule inherited styles by making it important:
form
{
/* styles */ !important
}
CSS rules are inherited by default - hence the "cascading" name. To get what you want you need to use !important:
form div
{
font-size: 12px;
font-weight: bold;
}
div.content
{
// any rule you want here, followed by !important
}