How to inherit from ancestor and not parent in CSS? - css

Here is my code:
.ancestor {
background-color: #ccc;
}
.parent {
background-color: #fff;
}
.child {
/* ??? */
}
How can I have .child inherit background-color: #ccc; without changing the class declaration order?
I tried background-color: inherit; but all I got is a complete reset (ie no color) of the background-color property.
Please also note I can't change neither .ancestor nor .parent.

You could just do this:
.ancestor {
background-color: #ccc;
}
.parent {
background-color: #fff;
}
.child {
background-color: #ccc;
}
or you could do:
.ancestor {
background-color: #ccc;
}
.parent {
background-color: #fff;
}
.child {
/* ??? */
}
and have
The html div or whatever like this:
<div class="ancestor child"></div>

This would do the trick:
.ancestor, .child {
background-color: #ccc;
}
.parent {
background-color: #fff;
}
You can do this,
.ancestor {
background-color: #ccc;
}
.parent {
background-color: #fff;
}
.child {
background-color: #ccc;
}

Related

How can I change other element's style on hover in scss

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;
}
}

SCSS: use ampersand in pseudo class

.my-class {
&:before{
content:"";
display:block;
background:red;
h1 ????{
padding-top: 5px
}
}
}
is it possible to use & in this location to have output like
h1.my-class:before {
padding-top: 5px
}
You need to SCSS it this way::
.my-class {
&:before {
content: "";
display: block;
background: red;
#at-root h1 {
&.my-class {
&:before {
padding-top: 5px;
}
}
}
}
}

HTML5 Meter Styling in Chrome

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>

Why are these inline-block elements outside their container?

As illustrated here:
http://jsbin.com/vavuvo/2
HTML
<div class="color-bar">
<span></span><span></span><span></span>
</div>
LESS
.color-bar {
display: block;
height: 5px;
border: 1px solid red;
> span {
display: inline-block;
height: 5px;
width: 25%;
}
> span:nth-child(1) {
background: blue;
}
> span:nth-child(2) {
background: green;
}
> span:nth-child(3) {
background: purple;
}
> span:nth-child(4) {
background: orange;
}
}
The default value for vertical-align is baseline. just set it to top instead.
http://jsfiddle.net/06z63n7L/
.color-bar > span {
display: inline-block;
height: 5px;
width: 25%;
vertical-align: top;
}

How to create fixed header layout

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 }

Resources