Using SCSS and have a nested element which I am trying to nest an nth-of-type() rule into but it hasn't worked anyway I type it. I want every odd el_header element to be white text and every even one to be black.
.el {
height: 500px;
width: 500px;
&_header {
height: 100%;
width: 10%;
background: #555;
display: inline-block;
line-height: 500px;
text-align: center;
&nth-of-type(odd) {
color: black;
}
&nth-of-type(even) {
color: white;
}
}
}
DEMO
You just forgot the : after &.
Use
&:nth-of-type(odd){...}
&:nth-of-type(even){...}
and it will work.
See updated fiddle
Related
I have a problem with styling a button element. Here is the sample:
$clrWhite: #fff;
$clrPrimary: #3c9494;
.khanbank__button {
display: block;
height: 50px;
border: none;
color: $clrWhite;
cursor: pointer;
&--primary {
background: $clrPrimary;
&:hover {
background: darken($clrPrimary, 5%);
}
}
}
Here is the what i've tried:
Test
I see you are using BEM
The issue is on your HTML, as you need to have both classes applied to the element
<button class="khanbank__button khanbank__button--primary">Test</button>
From your Codepen, you wrote:
<button class="khanbank__button--primary">Test</button>
However, if I were to translate your SCSS into normal CSS, it would become:
:root {
--clrWhite: #fff;
--clrPrimary: #3c9494;
--clrPrimaryDarken: #358282;
}
.khanbank__button {
display: block;
height: 50px;
border: none;
color: var(--clrWhite);
cursor: pointer;
}
.khanbank__button--primary {
background: var(--clrPrimary);
}
.khanbank__button--primary:hover {
background: var(--clrPrimaryDarken);
}
<button class="khanbank__button--primary">Test</button>
Perhaps now you could see the problem.
In your HTML you have only applied .khanbank__button--primary to <button>. You need to also apply the base class .khanbank__button to it.
In short, your HTML should be:
<button class="khanbank__button khanbank__button--primary">Test</button>
See this pen for working example.
I'm trying to have a scrolling banner on the index page which has multiple sub-properties but, the main property of:
height: 75vh;
On all following pages I would like the same banner to have all the other rules that apply to it, but only have the height different:
height: 30vh;
This would allow both banners to follow all the same rules for remaining mobile responsive - ie they both still come under the id="banner".
One easy fix for this would be to label one id="bannerX" and one id="bannerY" and then just copy all the subsequent CSS under the corresponding X or Y. For example:
#bannerX {
background-color: #444;
color: #fff;
min-height: 40em;
height: 75vh;
position: relative;
}
#bannerX input, #banner select, #banner textarea {
color: #fff;
}
#bannerX a {
color: #fff;
}
#bannerX strong, #banner b {
color: #fff;
}
and so on...
versus
#bannerY {
background-color: #444;
color: #fff;
min-height: 40em;
height: 30vh;
position: relative;
}
#bannerY input, #banner select, #banner textarea {
color: #fff;
}
#bannerY a {
color: #fff;
}
#bannerY strong, #banner b {
color: #fff;
}
and so forth...
But that just leads to a duplication of a lot of CSS that is the exact same, just the original ID is changing one rule within it. This would work but just seems a really messy way around it. I'm sure there must be a better way of working this but I can't seem to make it work. I've tried adding in a class="banner-thick" or class="banner-thin" to each within their own section but that didn't seem to work either because then neither banner follows the original id="banner" rules because they're now id="bannerX" or id="bannerY"! I can't seem to make it work! Does anyone have an idea of how I can fix this?
I suspect there's a simple fix and I just can't see the wood from the trees!
Thanks all.
Use multiple class like this - class="bannerX height1" for 1st one. For 2nd one use class="bannerX height2". Where height only holds the value of heights. No need to use heights in bannerX.
CSS
.bannerX {
background-color: #444;
color: #fff;
min-height: 40em;
/*height: 75vh;*/ as we define different heights in height1 & height1 class
position: relative;
}
.height1 {
height: 75vh;
}
.height2 {
height: 75vh;
}
HTML
<div class="bannerX height1">
</div>
<div class="bannerX height2">
</div>
Searching I can only find javascript/jquery solutions, isn't there any way to do it purely with css?
#UserMenu.block {
display: block;
}
#UserMenu {
font-size: 16px;
padding: 15px;
display: none;
background: #333;
position: absolute;
left: 10px;
width: 200px;
}
#UserMenu a {
color: #24A9D8;
display: block;
position: relative;
padding: 5px 10px;
}
You can test it here:
http://jsfiddle.net/hLch3jku/
You can use checkbox for trick. Put a label and checkbox in it. Put your other elements. And when checkbox is checked hide your elements with css. But this is a cheap trick, better use javascript.
I've got some Sass I've inherited that looks like below. I want to be able to specify a CSS tag to differentiate between green and another color (see anchor tag and comment).
Now, I have-
<div class="names"></div>
The link shows green. I want to be able do something like-
<div class="names myblue"></div>
And instead have it be a different color.
&.SpeakerCount3 {
.names {
text-align: center;
li {
text-align: center;
display: inline-block;
width: 82px;
margin-left: 5px;
&:first-child {
margin-left: 0;
}
}
img {
max-width: 100%;
}
h3 {
margin-top: 0;
a {
font-size: 10px;
}
}
}
}
.names {
min-height: 180px;
.photo {
margin-top: -21px;
}
img {
display: block;
border: 3px solid #282828;
margin: 0 auto;
}
h3 {
margin-top: 5px;
}
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
}
}
.description {
margin-bottom: 15px;
min-height: 120px;
h3 {
margin: 5px 0 20px 0;
min-height: 40px;
}
}
Having seen the HTML code that was being hidden in your question, I should say that good class names generally should relate to state rather than properties - so the class name "myblue" should probably be replaced with something like "featured", "highlighted" etc. This is especially the case where you are asking for "myblue" to actually change the colour to Orange - something that may well confuse future maintainers. In the case that "myblue" is a company or feature name it may well be legitimate, but I would consider carefully if there is an alternative class name which does not include a colour name.
In Sass you could do something like-
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
.myblue & {
color: orange;
}
}
As the "a" selector is contained within the ".names" selector though, this will result in a rendered rule of-
.myblue .names a {
color: orange;
}
As "names" is not a descendant of "myblue" in your DOM, the selector will not match - and this isn't what you want.
If you only want the rule to apply where both "names" and "myblue" are present I would write this-
.names {
min-height: 180px;
.photo {
margin-top: -21px;
}
img {
display: block;
border: 3px solid #282828;
margin: 0 auto;
}
h3 {
margin-top: 5px;
}
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
}
&.myblue {
a {
color: orange;
}
}
}
The ampersand produces a combined selector, rather than the descendant selector you would get with a space (this is Sass only - not valid CSS).
Alternatively, if you want the "myblue" class selector to apply even without the "names" class, then simply do this-
.names {
min-height: 180px;
.photo {
margin-top: -21px;
}
img {
display: block;
border: 3px solid #282828;
margin: 0 auto;
}
h3 {
margin-top: 5px;
}
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
}
}
.myblue {
a {
color: orange;
}
}
As the "myblue" selector appears after the "names" selector, the color property for the link will override the color set in "names" - leaving all other properties for the link and other elements intact. This solution simply utilises the CSS cascade to achieve the desired effect.
Is there any possibility to summarize CSS Selectors?
This is my stylesheet:
form.image_form > div > label > img
{
display: block;
margin-left: auto;
margin-right: auto;
}
form.image_form > div
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100%;
height: 156px;
display: table-cell;
vertical-align: middle;
}
form.image_form > div:hover
{
background: green;
}
form.image_form > input[type="radio"]
{
display: none;
}
form.image_form > input[type="radio"]:checked + div
{
background: red;
}
and something like this is what I'd like to archieve:
form.image-form
{
> div
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100%;
height: 156px;
display: table-cell;
vertical-align: middle;
> label > img
{
display: block;
margin-left: auto;
margin-right: auto;
}
:hover
{
background: green;
}
}
> input[type="radio"]
{
display: none;
:checked + div
{
background: red;
}
}
}
So is there any possibility to combine/summarize/interlace this code?
(I apologize if it looks like I did no research, I indeed did but couldn't fine anything in w3c documentation. Maybe I didn't use the right search terms.)
With "pure" CSS this isn't possible. But there are little helpers like LESS or SASS which will help you achieving this.
Nested selectors are not allowed in the CSS3 specification. It's a shame, because it would help to organise CSS files.
You can use preprocessed CSS files instead like SASS.
You need to use CSS pre-processors like SASS and LESS to achive what you are looking for. It cannot be done with pure CSS.