I have multiple nav ul li a that i need to style different and I have no good way of doing this. I've looked around the net for quite a bit but i do not understand how to do this without using class="" in every element. My code is below. There must be a better way of doing this? Like all children that has class="loginmenu" should be like x and all children of class="dropdownmenu" should be like y. Even if they are the same element.
<nav class="loginmenu">
<ul class="loginmenu">
<li class="loginmenu">
<p>Login</p>
</li>
</ul>
</nav>
<nav class="dropdownmenu">
<ul>
<li class="gigs">
<p>Gigs</p>
<p class="subtext">Shows & Gigs</p>
</li>
<li class="music">
<p>Music</p>
<p class="subtext">Tracks & Sets</p>
</li>
<li class="booking">
<p>Booking</p>
<p class="subtext">Booking & Contact</p>
</li>
CSS:
nav.loginmenu {
position: absolute;
}
li.loginmenu{
font-size: 25px;
margin-left: 1200px;
} and so on...
You can use nav.loginmenu <element>.
nav.loginmenu li {
font-size: 25px;
margin-left: 1200px;
}
For more information see the documentation of CSS selectors or try CSS Selector tester.
CSS rules can represent a hierarchy. For instance, the following means: "Apply this rule to all li elements that are inside a nav element with class loginmenu")
nav.loginmenu li {
..
}
It's commonplace for me to add classes to one root element that has no rules of its own, but for which having that class affects behavior of its children.
When sharing functionality, it is also common to add one class to multiple elements, or multiple classes to one element (separated by spaces) if it simply represents certain behavior (eg, applying a margin to all list elements to give them a "tabbing" look)
Additionally, many properties (most of the font-... properties for instance) are inherited from parent to child unless they're overridden at a lower level, so there's no need to repeat those for further descendants.
Not exactly sure what you are trying to do here. But if I'm interpreting correctly, you want to target different elements within each <nav> element? If so you can add an id which should be unique (not repeated) to your <nav> element then target the element like so:
html:
<nav id="loginMenu">
...
</nav>
css:
#loginMenu li {
font-size: 25px;
margin-left: 1200px;
}
Or you can use Genhis answer.
Related
I've looked through several DBs but I haven't found the answer that matches or works for my scenarios, so I'm turning to the experts, or at least the more experienced. I'm fairly new to HTML and CSS. I'm trying to figure out how to target an li inside of a ul, that's inside of an li, under a ul. Sort of like a drop down menu, where the main header has a submenu with more options. I don't want to add more classes or id's. I've tried the following versions to apply some basic CSS to it, but I can't seem to get it to target it:
#header-nav ul li
li ul li a
li#header-nav ul li
Even descendants doesn't seem to work (or it may be that I'm not doing it correctly?)
HTML:
<ul id="header-nav">
<li>
Home
</li>
<li>
Test Submenu
<ul>
<li> > Test 1 </li>
<li> > Test 2 </li>
</ul>
</li>
</ul>
I am attempting to target the Test 1 and Test 2 lines. Is there a way I can do this? I'm tapped on formats to make it work. I just want to change the font size of those two lines. I know it would be easier to add the classes or IDs but I am trying to avoid them where possible as I'm trying to understand the whole child, descendants, targeting thing better.
like that
#header-nav li > ul > li a {
background-color: red;
font-size: 80%;
}
<ul id="header-nav">
<li>
Home
</li>
<li>
Test Submenu
<ul>
<li> > Test 1 </li>
<li> > Test 2 </li>
</ul>
</li>
<li>
Test Submenu
<ul>
<li> > Test 1 </li>
<li> > Test 2 </li>
</ul>
</li>
<li>
Test Submenu
<ul>
<li> > Test 1 </li>
<li> > Test 2 </li>
</ul>
</li>
</ul>
Problem
"...I don't want to add more classes or id's.... I am attempting to target the Test 1 and Test 2 lines. Is there a way I can do this?"
Answer
Yes. But we must know some rules. CSS is declarative and its basic foundation are rules.
Casscading
The flow of CSS is a cascade of rulesets that take higher priority than the rulestes that have preceded them. From top, (less priority but wider influence due to inheritance,) to the bottom (higher priority but less influence due to how inheritance works in the same cascading direction (parent to child.))
The closer a ruleset is to the element it represents, the higher a ruleset chances of overriding the styles of the rulesets that have preceded it.
Styles
External Stylesheets: Normal priority, most maintainable, greatest scope -- unlimited amount of pages.
Page Location: Top of <head> tag.
Example: <link href="https://style.com/path/to/style.min.css" rel="stylesheet">
Inline Style Block: Higher priority, maintainable, limited scope -- a single page.
Page Location: Bottom of </head> tag.
Example: <style> selector { propertyName: propertyValue } ...</style>
Inline Style Attribute: Highest priority, least maintainable, least scope -- limited to a single tag.
Page Location: In a tag.
Example: <div style="propertyName: propertyValue"></div>
Specificity
The rules of Specificity are the only means of avoiding the cascading rule. This is the reason when we add a ruleset with !important after the Bootstrap CSS file and still have no success in overriding any style. Here's a CSS ruleset:
selector {propertyName: propertyValue}
⎱ ⎰
Declaration Block
Each CSS Selector has a measurable quality called Specificity. It is the measure of how specific a selector's declaration is as opposed to other selectors that share one or more properties and are used by a common element or group of elements. From that conflict, it is resolved by allowing the ruleset with the selector of the greatest specificity to override the styles of the other rulesets with its own styles. Should conflicting rulesets have selectors of equal specicity, then the rules of cascading apply (which ruleset is furthest from the top).
Specificity of a selector is measured by 4 separate numbers. From left (greatest) to right (least):
Being an inline style attribute. A single point in this category overrides all other categories that follow it. The only thing that can override it is !important unless of course it has an !important as well. If that's the case, then we can use the Grand Equalizer: JavaScript.
#ID. Having an #ID in a selector overrides everything except !important and inline style attributes.
.CLASS. Having .Class(es), [Attributes], and :Pseudo-class(es) in a selector overrides <Element Tags> and ::Pseudo-elements.
<Element Tags> and ::Pseudo-elements, very general thus the least in specificity.
Go to this page for an Online Specificity Calculator
If there's no dynamic elements added in the path then this'll work:
#header-nav li:last-of-type ul li a {
font-size: 48px;
}
There's 3 identical fragments of the layout -- each using a different relative unit of measurement (rem, em, %) at the equivalent distance of 48px (3 times the default of 16px = 1rem = 1em = 100%. Each fragment also shows how specificity and !important are used to make styles from frameworks like Bootstrap CSS so invincible.
Demo
html {
font: 400 16px/1.45 Consolas;
}
body {
font-size: 1rem;
}
b {
font-size: 1.5rem;
color: tomato;
}
i {
font-size: 1.25rem;
color: #A3CF65;
}
/* A */
/* 0,1,1,4 ⭐ */
#header-navA li:last-of-type ul li a {
font-size: 3rem !important;
}
/* 0,1,0,4 */
#header-navA li ul li a {
font-size: 2rem !important;
}
/* B */
/* 0,2,1,4 ⭐ */
#header-navB#header-navB li:last-of-type ul li a {
font-size: 3em;
}
/* 0,1,1,4 */
#header-navB li:last-of-type ul li a {
font-size: 2em;
}
/* C */
/* 🟊 */
#header-navC li:last-of-type ul li a {
font-size: 300% !important;
}
<!DOCTYPE html>
<html>
<head>
<meta chrset='utf-8'>
</head>
<body>
<ul id="header-navA">
<li>
<b>A</b>
</li>
<li>
<i>!important & Specificity Test</i>
<ul>
<li> <b>3rem</b> > Test A1 </li>
<li> <b>3rem</b> > Test A2 </li>
</ul>
</li>
</ul>
<hr>
<ul id="header-navB">
<li>
<b>B</b>
</li>
<li>
<i>Specificity Test</i>
<ul>
<li> <b>3em</b> > Test B1 </li>
<li> <b>3em</b> > Test B2 </li>
</ul>
</li>
</ul>
<hr>
<ul id="header-navC">
<li>
<b>C</b>
</li>
<li>
<i>!important & Inline Test</i>
<ul>
<li> <b>300%</b> > <a href="#" style='font-size:200%;'> Test C1 </a> </li>
<li> <b>200%</b> > <a href="#" style='font-size:200% !important'> Test C2 🟊</a> </li>
</ul>
</li>
</ul>
I have a css style defined in a .js file for <li> tag in a page. I am trying to modify the html page without changing the existing css and js files and layout of the page. I want to insert the following code:
<div style="float: left; width: 18%; bottom: 6.4%; border-right-style: groove; border-right-width:2px; border-top-style: groove; border-top-width:2px; border-bottom-style: groove; border-bottom-width: 2px; padding-right: 0%; padding-top: 0%; margin-right: 0%; margin-top: 0%; position: fixed;">
<ul class="MenuBarVertical">
<li>Text 1</li>
<li>Text 2</li>
</ul>
</div>
But every <li> tag in the html page automatically picks the style from the existing css file. I don't want this for some <li> tags. I want a different css for <li> tags. Is it possible that I enclose those <li> tags under a <div> tag and add a class to the div tag and define a css specific for it which can override existing css for every <li> tag? I can override existing css by defining style in the <li> tag like <li style="...">. It works fine, but I have to add style in every <li> tag. I want to know if I add id or class to the parent tag and write css for it somewhere in the page itself so as to override the existing style from .css file. What will be the code? How to declare such css in the section? or should I declare in body?
I hope I am able to explain my problem. I want to know the possible ways to override css style for a tag.
To override the old rules, you need to define elements as specific as possible, like this:
div ul.MenuBarVertical li {...}
Even better if you can put an id to the div or ul elements (if you have a single such element on the page).
If nothing else works, you can use the !important parameter, but it's strongly not recommended.
There are several possible solutions:
1) use classes to define the properties you want. e.g.
<ul class="MenuBarVertical">
<li class="other">Text 1</li>
<li class="other">Text 2</li>
</ul>
and then declare the styles you want to have on those lis. Declare it accordingly in your css file or to insert the ruleblock for this class with javascript, you can create a styleblock on the fly and add it to the head or use an existing one and append this rule.
2) Include an inline style block:
<ul class="MenuBarVertical">
<style scoped>
.MenuBarVertical li{
/*declarations here*/
}
</style>
<li>Text 1</li>
<li>Text 2</li>
</ul>
The scoped attribute is rather new and not recognized by browsers other than firefox and chrome, that's why I added the .MenuBarVertical part to further specify the lis you want to style (increase specificity) and it will still work. Once scoped is recognized in all browser you could drop this and just write li{...}.
Please don't:
a) use inline styles - bad, always try to avoid this!
b) use !important - even worse, dont do this either!
<style type="text/css">
#featured a:first-child
{
background-color:yellow;
}
</style>
<div id="featured">
<ul class="ui-tabs-nav">
<li><span>test 1</span></li>
<li><span>test 2</span></li>
<li><span>test 3</span></li>
<li><span>test 4</span></li>
</ul>
</div>
I wanted to highlight first anchor from the list, but unfortunately all anchors are highlighted. What is the mistake do here.
They are all highlighted because each a is the first-child of its parent li
What you probably want is something like:
#featured li:first-child a
{
background-color:yellow;
}
Because all anchors are the first child of their parents. You need to:
#featured li:first-child a {
background-color: yellow;
}
If you always have a list I would prefer the CSS solution like #powerbuoy and #danwellman posted. If you just want to format the first anchor tag nested inside an arbitrary tag (with id featured) with arbitrary nesting-level then I would prefer jQuery:
$('#featured a').first().css('background-color', 'yellow');
Example with div's rather than an unordered list: http://jsfiddle.net/9vAZJ/
Same jQuery code formatting a list (like in the question): http://jsfiddle.net/9vAZJ/1/
The jQuery code is a more general solution and fits better to your initial try to format the anchor tag in your question since both solutions are decoupled from list tags.
Nevertheless when list-styling is your only task here then I would recommend the CSS solution.
I'm building a tree using lists in lists the ordinary way.
Now, what I would like to do is to have an extra label
that is absolute (horizontally) to the start of the outermost tree.
The effect I'm trying to achieve is the below, where the farLeft are labels
on each li (see similar html below):
I can easily do this, but my css will be unclean, to say the least, something
along the lines of:
/* each indentaion level is 20 px to teh right, so I need to offset */
ol.topLevel li label.farLeft { position absolute; left=-218px; ...}
ol.topLevel li ol li label.farLeft { position absolute; left=-238px; ...}
ol.topLevel li ol li ol li label.farLeft { position absolute; left=-258px; ...}
A usage could be like the below, but with more nesting levels:
<ol class="topLevel">
<li>
<label>Some niceLabel</label>
<label class="farLeft">Far left text</label>
</li>
<ol>
<li>
<label>Some niceLabel</label>
<label class="farLeft">Far left text</label>
</li>
</ol>
</ol>
The above sucks in many ways, notably I have to change value in plenty of places if I move something, and I have to make one line per indention level.
Is there a better way to solve this, perhaps make my 'left' being the left of my top level tree, or some other good html mechanism.
It might be the time to mention I'm a total css newbie, so I might easily have
missed somethnig completely obvious.
Here its fiddle link
http://jsfiddle.net/5YKFa/6/
css
ol.topLevel{
padding-left: 100px;
}
li{
padding-left: 20px;
}
.left {
position: absolute; left:0px;
}
html
<ol class="topLevel">
<label>Top Level</label>
<li>
<label class="left">Label</label>
<label>1</label>
<ol>
<li>
<label class="left">Label</label>
<label>1.1</label>
</li>
<li>
<label class="left">Label</label>
<label>1.2</label>
</li>
</ol>
</li>
</ol>
Is the 'farLeft class being used elsewhere on the page? If not, the easy solution would be:
.farLeft { position: absolute; left:0px; ...}
Absolute positioning should line up automatically with it's parent container at 0px. So if you wrap a relatively positioned div around it you should be able to adjust margins and whatnot to get the result you are looking for.
You don't need to specify where everything is in the dom structure, unless you only want it to apply there, and even then using an id on the tag would be a better solution. Good luck
You can probably just use a margin on each level of the nesting, so it will grow the deeper you go.
lets say i have the following markup:
<ul class="editor">
<li>
Modules
View
Add
</li>
<li>
Sections
View
Add
</li>
</ul>
how do i float 'view' and 'add' to the right so that the right so that they appear in the same order as the html?
right now if i do
.editor li a:nth-child(2), .editor li a:nth-child(3){
float:right;
}
i will get a row that looks like:
Modules Add View
but i want
Modules View Add
Is this possible just via CSS3?
edit:
sorry i should have mentioned, i dont have access to the html. only css
Text-align the li right and float only the 1st a left.
.editor li {
text-align: right;
}
.editor li a:nth-child(1) {
float: left;
}
I assume that you've already hidden the default list bullets.
Just change the order.
<ul class="editor">
<li>
Modules
Add
View
</li>
<li>
Sections
Add
View
</li>
</ul>
Try the CSS3 flexible box model with explicit distribution and the box-ordinal-group property (http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/) - and if you can't make it work with floats, maybe it offers some alternative of attaining the same effect. Other than that, of course you can change the DOM order or simulate the layout by other means, but that's not advisable if you want to preserv your structure.
reorganize your DOM so that Add is before View and float them to right.