I copied this code as an example of a nested ul and li inside a nav, but my vs code is showing me there is an error, can anyone point it out to me?
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
It is not valid CSS syntax, since CSS does not support nesting blocks like that. Your code is written in a CSS preprocessor syntax like SASS or LESS.
It is equivalent to this vanilla CSS code:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Your editor is probably complaining because you included this inside a file with the .css extension. It needs to be saved as .scss or .less depending on flavor and then you need a compiler to turn it into vanilla CSS.
Related
I'm currently learning SASS, so if this seems obvious, don't laugh!
I have a unordered list, which on li > a hover the ul background changes.
Changing the a link background is simple enough, but how do I target the ul element? I've tried using &, ~ and < which has been advised on several online tutorials, but I've had no luck. Any and all help would be appreciated, Thank you.
ul {
margin: 0;
padding: 0;
li {
margin: 0;
padding: 0;
list-style: none;
a {
margin: 0;
padding: 0;
display: block;
font-size: 60px;
font-size: 3.75rem;
color: rgb(255,255,255);
font-family: 'Cera PRO Medium';
text-decoration: none;
&:hover & li & ul {
background-color: red;
}
}
}
}
If I understand your question, just add hover property to ul element:
ul {
margin: 0;
padding: 0;
&:hover {
background-color: red;
}
...
https://fiddle.jshell.net/fo214wkd/
This can't be achieved with normal CSS, even with SASS. You'll need to use a jQuery or other JavaScript alternative to achieve this.
In the CSS Level 4 draft there is a :has pseudo selector which could achieve this, however that's only a dream at the moment.
I know this isn't a jQuery question, however a very basic jQuery example would be:
$j("a").on("mouseover", function() {
$j(this).parent("ul").addClass("hovering");
}), (function() {
$j(this).parent("ul").removeClass("hovering");
});
I am having some problems with my CSS external style sheet. I am trying to make a unordered list into navigation bar. I am attempting to do this by adding multiple styles to my navbar div but none of the changes are having any effect on the page when they are inside the navbar div.
#navbar{
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
}
Thanks in advance
You can't nest them like that, try this:
The space between tags/identifiers means the right option is inside the left.
#navbar ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#navbar ul li {
display: inline;
}
The syntax you're currently using is only valid if you're using the Sass/SCSS preprocessor. While Sass is super-awesome, you'd probably be better off using vanilla CSS for now to build a solid CSS foundation. But whenever you want to get some exposure to Sass, check out their docs here: http://sass-lang.com/guide.
In the meantime, this should work for you:
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#navbar li {
display: inline;
}
I have recently started working with SASS in combination with Eclipse at work, and everything's working peachy:
Building an application through Ant executes a .bat which runs a Ruby command line which compiles any relevant .scss files into .css files.
One thing we've noticed however is that there can be duplicates. Granted, the general .css overrule rules apply (last one first), but having x-amount of the same statement is quite redundant. Take a a look at the following example of compiles .css code (it's not perfect, I was merely testing something)
/* line 2, ../../../sass/common/style.scss */
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
/* line 8, ../../../sass/common/style.scss */
nav li {
display: inline-block;
}
/* line 9, ../../../sass/common/style.scss */
nav li {
display: inline-block;
}
/* line 11, ../../../sass/common/style.scss */
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
/* line 1, ../../../sass/webshop/_button-style.scss */
div:hover {
padding: 12px 12px;
}
/* line 5, ../../../sass/webshop/_button-style.scss */
img {
padding: 12px 24px;
}
/* line 2, ../../../sass/webshop/_webshop-style.scss */
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
/* line 8, ../../../sass/webshop/_webshop-style.scss */
nav li {
display: inline-block;
}
/* line 9, ../../../sass/webshop/_webshop-style.scss */
nav li {
display: inline-block;
}
/* line 11, ../../../sass/webshop/_webshop-style.scss */
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
/* line 18, ../../../sass/webshop/_webshop-style.scss */
div:hover {
padding: 12px 12px;
}
In this test style.scss contains the main styling for the webshop, _button-style.scss for any buttons present and _webshop-style contains any overrules for style.scss.As you can see, there are duplicates from style.scss and _webshop-style.scss present in this file, which is something we'd rather avoid. Can this be avoided? If yes: How?; If no: Is there a workaround/manual method to avoid this?
NOTE: _button-style.css is of no importance to this question/problem. It's just here to show you in a complete way what I'm doing.
For further reference, here's some important files:
config:
require 'compass/import-once/activate'
require "sass-globbing"
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
#http_path = "/"
css_dir = "../webapp/static/css"
sass_dir = "common"
add_import_path = "../webshop/"
images_dir = "images"
javascripts_dir = "javascripts"
style.scss:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
#import "../webshop/_*";
_webshop-style.scss:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
div:hover {
padding: 12px 12px;
}
Sass will not attempt to remove any styling, ever, under any circumstance (only empty selectors and whitespace/comments are removed, depending on the chosen output style). Sass has no way of knowing if you are overriding previous declarations with a different selector (eg. .foo .bar and p.bar might match the same element), so it writes things out exactly as you specified.
If you want to continue writing/using duplicate declarations in your Sass, you will need to use a 3rd party tool (eg. linter) to remove them.
This question already has answers here:
Nested CSS styles?
(4 answers)
Closed 8 years ago.
So I was on Sass webpage learning a bit of its Syntax and saw a strange CSS Syntax that I don't know if it's posible.
Before asking I've already searched on W3School and other sites if that's posible.
Here is the code I found strange:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
My question is if this Syntax is posible, I tried it and it doesn't work.
I also thought it can be a different language and searched but found nothing.
The normal Syntax I would do to make the code above work would be like this:
nav > ul {
margin: 0;
padding: 0;
list-style: none;
}
nav > ul > li {
display: inline-block;
}
nav > a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
SASS is a CSS preprocessor.
What is a preprocessor?
A preprocessor is a program that takes one type of data and converts it to another type of data.
It means that the code you've seen in SASS webpage isn't CSS syntax, it's SASS syntax, that is transformed in the latter after its preprocessor translates it.
The code you provided above would be transformed in something like this:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
TL;DR
Before that style is added to a webpage, it's transformed into CSS. There's no stylesheet.sass references in an HTML page.
I am going nuts, what am I missing, something obvious I am sure, to make my nav buttons stack next to each other inline and not on top of each other. When I tried using display: inline they all got real tiny like slivers!
http://awesomenesslabs.com/staging/brenna-resp/
Just change your UL and LI CSS to this:
ul {
list-style: none outside none;
display: block;
}
li {
line-height: 18px;
margin-bottom: 12px;
display: inline-block;
}
#navbar > ul > li {
display: inline-block;
}
You should add a class like this.
#navbar ul li {
display: inline-block;
}
and your work tab hover position should be
.nav-work-button:hover {
background-position: 0 -47px;
}