Can somebody please explain what the inherit keyword means in CSS and how it works?
It will use the same value as the same property its parent has.
body {
margin: 234px;
}
h1 {
margin: inherit; /* this equals 234px in this instance */
}
<body>
<h1></h1>
</body>
If there are multiple instances of <h1> in the file, it will take the margin of its parent, so 234px is not always the value it will have. For example:
<body>
<h2></h2>
<div>
<h2></h2>
</div>
</body>
body {
margin: 20px;
}
div {
margin: 30px;
}
h2 {
margin: inherit; /* 20px if parent is <body>; 30px if parent is <div> */
}
To clarify, inherit doesn't do anything unless you're using it to override another style rule, otherwise it's just reinforcing the default behavior. Note that the overriding rule should be higher specificity or be below the rule that it overrides.
.pink {
background-color:pink;
}
.green {
background-color:lightgreen;
}
.override {
background-color:inherit;
}
<div class="pink">
<p class="green">I'm classed "green", and I am green.</p>
<p class="green override">I'm also classed "green" but `inherit` overrides this and causes me to inherit pink from my parent.</p>
</div>
Related
While I know you can't write variables like
root: {
--aic: align-items:center;;
}
Is there anyway to get round this, by combining the various parts seperately? The obvious obstical here is the requirement of the colon inside the variable.
i.e.
root: {
--ai: align-items:;
--center: center;
--aic:
var(--ai)
var(--center);
}
.myclass {var(--aic);}
I would suggest you to switch to SCSS and use a #mixin. Read more about it here.
Here's a live demo.
HTML:
<div id="test">TEST</div>
SCSS:
:root {
--text_color: red;
--background_color: gold;
}
#mixin my_mixin {
color: var(--text_color);
background-color: var(--background_color);
}
#test {
#include my_mixin;
}
Based on my comment on your question, you can use classes to achieve something similar. But you can't use custom properties as CSS properties, only values -- it's the same as saying for example margin: margin: var(--customMargin);;
/* Layout unrelated to answer */
div { border: 1px solid black; color: white }
.varText { background-color: red }
.varPad { background-color: blue }
.varText.varPad { background-color: green }
/* Answer */
:root { --size: 1rem }
.varText { font-size: var(--size) }
.varPad { padding: var(--size) }
<div class="varText">
Size Text only to root variable
</div>
<div class="varText" style="--size: 2rem">
Size Text only to inline variable
</div>
<div class="varPad">
Size Padding only to root variable
</div>
<div class="varPad" style="--size: 2rem">
Size Padding only to inline variable
</div>
<div class="varText varPad">
Size Text and Padding to root variable
</div>
<div class="varText varPad" style="--size: 2rem">
Size Text and Padding to inline variable
</div>
I have a block with div inside:
<div>
<div class="do">Do it</div>
</div>
Element .do has cursor: none, but parent div has cursor.
How to remove cursor from .do element? Now parent block sets this property
It should come with simple rule
div {
cursor: pointer;
}
.do {
cursor: none;
}
<div>
<div class="do">Do it</div>
</div>
You're probably dealing with CSS Precedence Rule. Have a look at this Specificity doc for further details.
I am assuming, this is what's happening (Pasted code from Nicolae's answer)
.withCursor > .withoutCursor {
cursor: pointer;
}
.withCursor {
cursor: pointer;
}
.withoutCursor {
cursor: none;
}
<div class="withCursor">
<div class="withoutCursor">Do it</div>
</div>
As you may notice, the rule for .withoutCursor gets overridden by the .withCursor > .withoutCursor.
If you figure out the right selector for your .do, or remove the one that overrides it, this should be trivial.
.withCursor {
cursor: pointer;
}
.withoutCursor {
cursor: none;
}
.withInitialCursor {
cursor: initial;
}
<div class="withCursor">
<div class="withoutCursor">None</div>
<div class="withInitialCursor">Cursor initial</div>
<div>Cursor pointer - inherited</div>
</div>
You can just do cursor: none to the inner element.
I understand that I can change another element's style when hovering on a different element like this:
.element-one:hover .element-two {
opacity: 0.8;
}
But how can I change the style of all the elements in the page except element-two when I hover on element-one?
You can use .element-one:hover :not(.element-two).
Here is an example:
.element-one:hover :not(.element-two) {
opacity: 0.8;
}
.element-one {
background: black;
margin: 10px;
}
.element-one div {
background: green;
border: 1px solid blue;
margin: 10px;
padding: 10px;
}
<div class="element-one">
<div class="element-two">
element-two
</div>
<div class="element-three">
element-three
</div>
<div class="element-four">
element-four
</div>
</div>
However - note that it will work only for elements inside element-one and not for all the elements in the page.
You can do this with body for example, but the problem there is that .element-two is probably also inside some other element that exists inside body, and in such case the .element-two will get the opacity from it's containing element.
Lets say I have the following html:
<header class="header">
<div class="title">
<h1>Home</h1>
</div>
<div class="logo">
<img src="#" alt="Logo">
</div>
<div class="account">
<div class="options">
</div>
<div class="search">
</div>
</div>
</header>
And I have the following SCSS:
header {
height: 4.1rem;
div {
width: 33%;
float: left;
height: 4.1rem;
line-height: 4.1rem;
color: #fff;
&.title {
h1 {
font-weight: normal;
font-size: 3rem;
padding: 0;
margin: 0;
}
}
&.logo {
text-align: center;
}
&.account {
}
}
}
Now the problem that I have is that divs options and search are 33% percent of account which is logic as I have div {width: 33%}. I know I can select direct child elements with:
header {
> div {
}
}
But this doesn't help even if I put the > infront of all other classes. I also know I can say that the width should be 0 or what ever again in .account but I would like to prevent this.
Try this:
...
& > div {width: 33%;}
div {
float: left;
height: 4.1rem;
line-height: 4.1rem;
color: #fff;
...
Take out div width and apply it only on direct children. Leave rest as is.
Here is quick fiddle (remove .option and .search styles later, its only for visualisation).
Please edit your question and better explain what exactly you want to achieve.
Use the & with > inside the parent element like this:
.services {
& > div {
margin-bottom: 25px;
}
}
I am not certain I understand you. But I think you want a combination of direct children and child pseudo selectors, in pure CSS:
header > div:first-child {
}
Or, for the second div:
header > div:nth-child(2) {
}
You could also use the not selector:
header > div:not(.account) {
}
to exclude any unwanted div's.
I have two elements, I want to apply same background style, but different font style to them, how to write the style statement in the header part without having to write duplicate statement?
It doesn't get simpler than:
#element1, #element2 {
background: red
}
#element1 {
font: 20px sans-serif
}
#element2 {
font: 24px serif
}
You should read up on selector grouping.
You can apply more than one class to an element...
HTML:
<div class="common div1">My Stuff</div>
<div class="common div2">My Stuff 2</div>
CSS:
.common {
background-color:blue;
background-image:url("bill.jpg");
background-repeat:no-repeat;
}
.div1 {
font-family:Calibri;
}
.div2 {
font-family:Arial;
}
Give it a class + an ID
<style type="text/css">
div.common { background:blabla; }
div #type1 { font-style:blabla; }
div #type2 { font-style:otherblabla; }
</style>
<div class="common" id="type1">asd</div>
<div class="common" id="type2">asd</div>
Or use the method posted by the other guy, 2 classes