I am using scss.
On situation like this, how can I change target element's style on hover child element?
https://codesandbox.io/s/thirsty-haibt-60yph
.parent {
// some styles..
.child {
// some styles..
}
}
.target {
// some styles..
}
I tried using #at-root inside the child, but couldn't figure out. (code below)
.target {
height: 100px;
width: 100px;
background-color: blue;
}
.parent {
height: 200px;
width: 200px;
background-color: red;
.child {
height: 100px;
width: 100px;
background-color: yellow;
&:hover {
#at-root .target {
background-color: green;
}
}
}
}
Kindly help..
the message given is clear, #root cannot be used that way.
but you can trick css via pointer-events:
body {
.parent {
height: 200px;
width: 200px;
background-color: red;
pointer-events:none;
.child {
height: 100px;
width: 100px;
background-color: yellow;
pointer-events:auto;
}
&:hover {
background-color: green;
}
}
.target {
height: 100px;
width: 100px;
background-color: blue;
}
}
or did you mean
body {
.parent {
height: 200px;
width: 200px;
background-color: red;
pointer-events:none;
.child {
height: 100px;
width: 100px;
background-color: yellow;
pointer-events:auto;
}
&:hover ~ .target {
background-color: green;
}
}
.target {
height: 100px;
width: 100px;
background-color: blue;
}
}
Related
This is my SCSS for the segment
.segment {
&__inActive {
width: 160px;
height: 55px;
background-color: red;
}
&__active {
width: 160px;
height: 55px;
background-color: black;
}
}
I am simplifying the scss like below but it is not working.
.segment {
width: 160px;
height: 55px;
&__inActive {
background-color: #f2f2f2;
color: #333333;
background-color: red;
}
&__active {
background-color: $color-blue1;
color: #ffffff;
background-color: black;
}
}
calling like below but it's not working can someone resolve this.
className={ i === activeIndex
? 'segment__active'
: 'segment__inActive'}
className={`${i === activeIndex? 'segment__dimn__active' : 'segment__dimn__inActive'}`}
I want to style a password strength meter implemented via . It works fine in Firefox, but not in Chrome.
Here is the relevant CSS, taken from the GitHub project CSS file:
meter {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0 auto 1em;
width: 100%;
height: .5em;
/* Applicable only to Firefox */
background: none;
background-color: rgba(0,0,0,0.1);
}
meter::-webkit-meter-bar {
background: none;
background-color: rgba(0,0,0,0.1);
}
meter[value="0"]::-webkit-meter-optimum-value,
meter[value="1"]::-webkit-meter-optimum-value { background: red; }
meter[value="2"]::-webkit-meter-optimum-value { background: yellow; }
meter[value="3"]::-webkit-meter-optimum-value { background: orange; }
meter[value="4"]::-webkit-meter-optimum-value { background: green; }
meter[value="1"]::-moz-meter-bar,
meter[value="1"]::-moz-meter-bar { background: red; }
meter[value="2"]::-moz-meter-bar { background: yellow; }
meter[value="3"]::-moz-meter-bar { background: orange; }
meter[value="4"]::-moz-meter-bar { background: green; }
The last bit is important, the ability to style based on the meter's value.
It's an intentional behavior change.
https://www.chromestatus.com/feature/5668635896971264
So, you need to remove -webkit-appearance:none, or need to build a meter value box yourself.
<style>
meter {
-webkit-appearance: none;
background: gray;
}
meter > div {
height: 100%;
}
meter[value="1"] > div {
width: 25%;
background: red;
}
meter[value="2"] > div {
width: 50%;
background: yellow;
}
meter[value="3"] > div {
width: 75%;
background: orange;
}
meter[value="4"] > div {
width: 100%;
background: green;
}
</style>
<meter value=3><div></div></meter>
.product-item-info::after {
background-color: #e3e3e3;
content:" ";
height:300px;
width:300px;
}
.product-item-info {
height: 300px;
}
<div class="product-item-info"></div>
Is it possible to create a color background layer as pseudo element, what I try now and is not working
.product-item-info:after {
background-color: #e3e3e3;
content:"";
height:300px;
width:400px;
}
::before and ::after are display: inline by default. You'll want to set display: block for your width and height properties to be applied:
.product-item-info::after {
background-color: #e3e3e3;
content:" ";
height: 300px;
width: 300px;
display: block; /* this is what you need */
}
.product-item-info {
height: 300px;
background-color: red; /* for demonstration purposes */
}
<div class="product-item-info"></div>
Here is an example of what you are trying to do.
Also for pseudo elements you should use "::"
.product-item-info {
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
}
.product-item-info::before {
background-color: lightgreen;
content: " ";
height: 150px;
width: 150px;
position: absolute;
top: 0;
left: 0;
}
.product-item-info::after {
background-color: lightblue;
content: " ";
height: 150px;
width: 150px;
position: absolute;
bottom: 0;
right: 0;
}
<div class="product-item-info"></div>
code pen
HTML
<div id="header">header</div>
<div id="body"><div id="content">content</div></div>
<div id="footer">footer</div>
CSS
#header {
background-color: red;
}
#body {
background-color: orange;
}
#content {
width: 500px;
margin: 0 auto;
background-color: yellow;
}
#footer {
background-color: blue;
}
body {
display: table;
height: 100%;
width: 100%;
}
#header,#footer,#body {
display: table-row;
height: 1px;
}
#body {
height: auto;
}
#content {
/* ??? */
}
html,body {
margin: 0;
padding: 0;
height: 100%;
}
This answer provides some good solutions when just the top-level div needs to be stretched, but in my scenario, I can get #body (orange bg) to stretch but I need #content (yellow) to stretch all the way down as well.
How can I do that?
Demo http://codepen.io/anon/pen/Bltbh
#header {
background-color: red;
}
#body {
background-color: orange;
height:100%;
}
#content {
width: 500px;
margin: 0 auto;
background-color: yellow;
}
#footer {
background-color: blue;
}
body {
display: table;
height: 100%;
width: 100%;
}
#header,#footer,#body {
display: table-row;
}
#header,#footer {
height:1px;
}
#body {
height: 100%;
}
#content {
height: 100%;
}
html,body {
margin: 0;
padding: 0;
height: 100%;
}
Having some issues trying to create a fixed header layout for this jsfiddle:
http://jsfiddle.net/4xk4D/107/
Basically, I'd like the id element app-header-container to be fixed on the page.
I used this article as a reference but no luck yet!
NOTE: I am using SCSS in the jsfiddle.
#header {
top:0;
width:100%;
position:fixed;
background-color:#FFF;
}
#content {
position:static;
margin-top:100px;
}
Trying to modify your css:
#app-header-wrapper
{
width: 1024px;
margin: 10px auto;
background-color: pink;
}
#app-header-container
{
}
#app-main-nav
{
background-color: pink;
}
#app-header
{
height: 93px;
background-color: blue;
}
#app-access
{
background-color: green;
}
#app-content-container
{
width: 1024px;
margin: 10px auto;
background-color: red;
}
#app-content
{
float: left;
width: 739px;
background-color: yellow;
}
#app-sidebar
{
float: right;
width: 275px;
background-color: orange;
}
#app-footer
{
margin: 0 auto;
width: 1024px;
height: 50px;
background-color: pink;
}
.clearfix:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
Or just try using css grid for layouting. One of them http://1kbgrid.com/
#app-header-wrapper {
width: 1024px;
margin: 10px auto;
background-color: pink;
#app-header-container {
#app-access {
background-color: green;
}
#app-header {
height: 93px;
background-color: blue;
}
#app-main-nav {
background-color: pink;
}
}
}
You can not nest CSS that way. Much of the CSS is being ignored due to how you've got it nested and sub nested between brackets. Markup shoul dbe selector { property } or selector, selector, selector { property }