I am reading a Responsive website book, where I see the styles definition like
.main-navigation
{
li {position: relative;}
.children
{
left: -999em;
position:absolute;
}
}
I have also tried in my css file, but seems not to be working.
Now my question :) Can we define css style in this way?
This is not proper CSS. But you can use this with a CSS preprocessor like less.
Quote from the website:
Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.
This works with SASS/SCSS, too.
Related
I have just found SCSS and am thinking it would be useful on a site I am currently developing (I'm about 50% done) and that it would be a good way to make some of my existing CSS tidier and easier to read.
My question is can I rewrite parts of my existing CSS as SCSS and leave the rest as CSS? Can I have both CSS and SCSS in the same stylesheet or does it have to be all SCSS or CSS?
SCSS is a pre-processor of CSS, so yes you can mix, as long you use the files ending in .scss
Although I advise you to read the SASS Docs and use it in a proper way.
see this below and the SASS demo:
SCSS
.test {
div {
color:red;
}
}
div span {
background:blue;
}
CSS
.test div {
color: red;
}
div span {
background: blue;
}
yes, that's perfectly fine, no problem.
I'd like the app I'm making to use a reset.css at the global level. I'd also like it to penetrate all shadow roots but have low specificity. How can I accomplish this?
Let's say my reset.css contains something like:
li, ::shadow li {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
Then my custom element has a template like:
<template>
<style>
li {
padding: 10px;
}
<style>
<ol>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ol>
</template>
My issue is the template's li selector doesn't have enough specificity to beat ::shadow li. I don't want to have to repeat myself in every custom element. I think I could add a <link> to each <template> but then I'd be repeating myself again. I could also have JavaScript inject the <link> but I'm not sure that's the best way.
What are some other ways I could use a reset.css that penetrates shadow roots but has very little specificity?
I understand that post deprecation of ::shadow and /deep/ selectors this question might not be valid anymore, but if you are still facing this issue, then I would suggest you to use css #imports to inject your common reset.css in shadow-root template.
Since it has to be first tag inside template, your inline stylesheet will take precedence over reset.css, where ever applicable.
I have written an answer here on same topic and one here to inject those #imports at runtime if you don't want to repeat it yourself for each template. Probably it will be work out for you.
I was just wondering if CSS can support targeting multiple child elements with some easier syntax.
For example
I only want to change the css for h1, h2, h3 under a div with the id of parent
Normally you have to go...
#parent h1, #parent h2, #parent h3 { color:red; }
Is there an easier way to do this. Something like...
#parent {
h1,h2,h3 { color:red; }
.my_class { font-size:100%; }
#header { width:100%; }
}
In my second hypothetical example, the css will only be applied if the elements are children of #parent.
Thanks
CSS does not support what you want.
Both Sass and Less do (by chance, exactly as you have written it).
Sass:
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
Less:
Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.
Both products are very mature, share just about every feature the other does, but do have some minor differences between what they extend that make them not 100% compatible with each other (prior to generating CSS).
In css you must use something like this:
#parent > h1, #parent > h2, #parent > h3
{
color: red;
}
JSFIDLE: http://jsfiddle.net/fg6g7kt6/
I have several divs. One of them has class="active". I want all the divs to be hidden (display:none;) except the one with .active. What should the selector be?
Have you tried?
div { display: none; }
div.active { display: block; }
PS. I'll add explanation. When you specify a class in a selector it has higher priority in cascading logic (because of its higher specificity) than just a single div (because single div is more generic, wider). So there is no need to use !important or stuff like that.
div:not(.active){
display: none;
}
Try the :not pseudo-class.
For example:
div:not(.active) {display:none;}
As Paul commented below, this selector is not supported in IE8 and below. But considering you included the CSS3 tag and specifically asked for a selector, that might not be an issue. For a cross-browser solution, see #mkdotam answer.
use !important in with css, something like that:
.active {
display: block !important;
}
and example: http://jsfiddle.net/hNLen/
I'm using the following css to alternate the background colour of li elements, but need the css to be maintained if the rows get the .hidden class assigned to them (.hidden class being display: none;).
ul li:not(.hidden):nth-child(odd) {
background: #fff;
}
ul li:not(.hidden):nth-child(even) {
background: #f4f4f4;
}
Any ideas on how to keep the alternating colours while adding / removing li elements to / from the ul? Please only give a CSS based solution if possible. I may have to do it in JS but would prefer not to!
Cheers
Due to the way the :not() pseudo-class works, you cannot use it to filter elements out of the DOM to obtain a subset of elements on which to apply styles. See this answer for the nitty gritty.
EDIT: Apparently my solution below isn't supposed to work either. I need to take a break from answering questions or something. So I guess the only other feasible route may be to do this with JavaScript. I'm keeping this post here instead of deleting as I don't want to take the comments down with it.
To this end, if you can modify the HTML, you can instead use a class that is common to all your lis and target that instead, in conjunction with :nth-of-type():
ul li.shown:nth-of-type(odd) {
background: #fff;
}
ul li.shown:nth-of-type(even) {
background: #f4f4f4;
}
What if you changed your .hidden to the following
.hidden {height:0px; overflow:hidden}
I haven't tested this code at all, but the elements would still be in the DOM for manipulation yet shouldn't be visible to the user.