I followed along with this tutorial on building a react app: React JS Tutorial for Beginners #1 – Build a website using React, Sass, Gulp and Node.js
Everything works great except the spacing of the nav bar. The way he adjusts the spacing is in the:
Code: https://gist.github.com/kentonraiford/42cad2361cb6e47c7fd6b995013d50f4
I rewatched the video a few times and was unable to figure out where I messed up. This might be a simple fix but I can't seem to find the solution.
Link to file: https://github.com/kentonraiford/reactTutorial
In the repository that you posted, the problem is the css selector you're trying to use to apply the margin-right has less precedence so is margin-right property is being overwrite
header {
nav ul li {
margin: 0;
padding: 0;
}
}
Precendence is calculate in this way
Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)
So this selector will have this precedence: (0, 0, 0, 4)
header {
ul li {
list-style-type: none;
display: inline-block;
margin-right: 20px;
}
}
And the selector you use to add margin-right has (0, 0, 0, 3)
So the other selector has more Precedence that the selector that you want to use to apply margin-right to the li element
You can fix this problem by creating a more specific selector (adding a class or id to the selector) that is going to give it more precedence to overwrite other selectors or use !important (Not recommended way)
For example:
header {
ul.header-list li {
list-style-type: none;
display: inline-block;
margin-right: 20px;
}
}
Precedence: (0, 0, 1, 3)
More info about precedence:
http://vanseodesign.com/css/css-specificity-inheritance-cascaade/
Related
Here is my CSS source code
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
width: 100%;
height: 100%;
background: #42455a;
}
.menu ul {
display: inline-flex;
margin: 50px;
}
.menu ul li {
list-style: none;
margin: 0 20px;
color: #b2b1b1;
cursor: pointer;
}
.logo img {
width: 30px;
margin-top: -7px;
margin-right: 48px;
}
.active {
color: #19dafa !important;
}
.search {
margin-left: 398px; /* problem in this line */
}
I have a ul full of li's, and I set their properties in the ".menu ul li {}" category. The thing is I don't want ALL of them to have the same properties, I want the last one which is a search bar to be all the way on the right, like so:
" - - - - ___________ -"
where each "-" represents an li and the "_" is the space in between. The problem is in the very last category I made the margin-left 398 pixels. But despite that being the last instruction it is still following the instructions set before.
When I use !important it works, but I don't see why I would need to use it when supposedly the final instruction takes precedence?
The problem also applies in the .active class as well. Why do I have to use the !important to get it to work? Seems like a hassle if I have to use !important everytime I want a unique property in one of my elements.
EDIT:
I ended up finding a work-around by typing:
.search {
right: 20px;
position: absolute;
}
but my question still stands.
The final rule in your CSS does not take precedence. The various selectors of a CSS rule combine to form a specificity number which is what determines which CSS rules are applied. Classes, tag names, IDs, and other element attributes each increase the specificity score of a rule -- the more selectors, the more specific the rule.
You add together all of the specificity weightings and can essentially read it like a 4-digit number. For example, using a tag gives +1 while a class gives +10 (this isn't totally accurate, see reading materials at end). So your rule for .search has a specificity of 10 since it's just a class, while your rule .menu ul is 11 since it's a class with a tag. When applied to the same matching elements, the properties defined in .menu ul will take precedence over .search despite .search being written last.
!important essentially acts like a boolean flag to work regardless of the specificity scores. However, two rules with !important flags will still fall back to specificity. Similarly, if two rules have the same specificity, only then does the last one written take precedence.
For further reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://css-tricks.com/specifics-on-css-specificity/
Suppose I have an element with 2 classes that both apply padding-left to it:
<section class="pad1 pad2">
...
</section>
then in my .css file
.pad1 {
padding-left: 60px;
}
.pad2 {
padding-left: 30px;
}
How will padding-left be applied?
What rules should I know in this kind of situations?
I hope you understand.
.pad1{
padding-left:60px;
}
.pad2{
padding-left:30px;
}
.pad3{
padding-left:30px;
}
.pad4{
padding-left:60px;
}
<section class="pad1 pad2">
Hi, This is css padding solution.
</section>
<section class="pad3 pad4">
Hi, This is css padding solution.
</section>
Your question is all about CSS selection precedence rules. At first you should understand what is CSS precedence value for each selector.
We usually use as a CSS selector class, ID, tag name, inline etc. Each selector have own priority value, priority table like below:
For each tag (a, div, p etc.) selector = 1,
For each class and pseudo-class (.class1, .class1:active etc) selector = 10,
For each ID (#id) selector = 100,
For each inline style (<div style="color:red"></div>) selector = 1000,
For each !important (.class { color: red !important;}) selector = Infinity.
Suppose right now you have a selector like following:
#nav ul a { color: gray; } = 100 (#nav) + 1 (ul) + 1 (a) = 102
Now come on your point, you have 2 class selector .pad1 and .pad2 which each selector value is 10 means equal so which one will work? If selection priority if equal then most last one will work so .pad2 will be work, because CSS parser read document top to bottom. But if selection priority is different then higher one will work in this case order dose not matter.
For better understand see here with more clear explanation: https://css-tricks.com/specifics-on-css-specificity/
In this situation always last one CSS class will be on priority:
If .pad2 will be last one then it will be overwrite on previous class .pad1 like below:-
.pad1 {
padding-left: 60px;
}
.pad2 {
padding-left: 30px;
}
<section class="pad1 pad2">
This is class section
</section>
If .pad1 will be last one then it will be overwrite on previous class .pad2 like below:-
.pad2 {
padding-left: 30px;
}
.pad1 {
padding-left: 60px;
}
<section class="pad1 pad2">
This is class section
</section>
CSS rules are applied to objects in the page that match their selectors in the order they are encountered in the style sheet. However With !important, the property will now give priority to the latest important value.
I have a horizontal menu built using a <ul> element. I'm trying to get it to evenly spread out each <li> across the width of the menu. Based on several answers here on SO, I used the following CSS:
ul {
display: table;
width: 100%;
}
ul li {
display: table-cell;
}
However, no matter what I try, the <li> elements still end up with a calculated display of block, with this contradictory information from the debugger (tested in FF and Chrome):
I didn't know what is going on here, and (more importantly) how do I get my list items to display as table-cell?
In photo is showed that your style.css is really big (min.1835 lines) and because of that styles to ul could be overvritten somewhere.
To make your rule more important than existing rule, use !important keyword after rule like so:
ul {
display: table!important;
width: 100%!important;
}
ul li {
display: table-cell!important;
}
CSS has a trait called importance, it chooses which rules are the most specific and thus should override more loose rules. As you seem to use a CSS framework, your own rules don't override the framework's generic rules. Turns out that you have two options to increase the importance of your rules at main.css:
Add !important after your rules:
ul li {
display: table cell !important;
}
Make your selectors more specific:
#menu ul li.menu-list-item { ... }
Your question also looks very strange and you may be subject to a browser rendering bug, have you tried it out with other browsers?
Need a guidance from CSS pro. how can i get the expected result. Appreciated for any help.
What i've tried so far : JsFiddle Demo
Simply give your <li> elements a margin. For example:
ul li {
margin: 0 0 10px;
}
To avoid extra spaces below the list you can remove the last margin with the last-of-type psuedo selector:
li:last-of-type {
margin-bottom: 0;
}
Assuming that you are content with the static fixed-width layout, you can also force the widths of all list items with:
ul li {
width: 145px;
}
Here your adjusted fiddle.
For further reference see the tutorials at w3cschools. Specifically for the CSS width and margin properties, and the last-of-type psuedo selector.
Using a GWT web app, Firebug says that the following HTML
<table class="drop-zone drop-zone-column-66 multi-zone">
...
</table>
is using this CSS.
.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
display: block;
}
What CSS do I need to write so that this <table> will have style, display: none?
I made 2 attempts: [EDIT - updated .multi-zone and display:none]
.drop-zone .drop-zone-column-66 .multi-zone {
display: none;
}
and
.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
display: none;
}
but Firebug still gives me the CSS shown at the top.
Please advise me.
Strictly speaking, all you should need is:
.maximized-gadget .drop-zone.multi-zone {
display: none;
}
provided that that rule comes after the original rule you gave above:
.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
display: block;
}
Depending on what the structure of the rest of your document is and what you're trying to do, you may need to add some specificity to that rule.
The problem with your first attempt is that your rule would apply to an element with a class of multi-zone which is a descendant of an element of class drop-zone-column-66, which in turn is a descendant of an element of class drop-zone. What you want is to target an element that has all three of those classes set on it, which you can do by chaining those selectors:
.drop-zone.drop-zone-column-66.multi-zone {
display: none;
}
which should set you right (though if I remember correctly this won't work in older versions of IE).