:not( .banner-nav-not ) .banner-nav a{
color: red;
}
<div class="banner-nav clearfix">
<ul>
<li><a class="banner-nav-not" href="#">how we can help? <span>what we offer</span></a></li>
<li>mobile technologies</li>
<li>corporate training</li>
<li>online marketing</li>
<li>graphic design</li>
</ul>
</div>
I want to select every "a" tag except class".banner-nav-not".
its a wrong order .change that .banner-nav a:not( .banner-nav-not )
.banner-nav a:not( .banner-nav-not ) {
color: red;
}
<div class="banner-nav clearfix">
<ul>
<li><a class="banner-nav-not" href="#">how we can help? <span>what we offer</span></a></li>
<li>mobile technologies</li>
<li>corporate training</li>
<li>online marketing</li>
<li>graphic design</li>
</ul>
</div>
Related
I am trying to write a HTML documentation for my team project. When I was trying to create a navigation menu with nested structure, the second degree doesn't show any content. Can I get some suggestion on possible cause of my problem?
<section class="contents">
<h1 id="contents">Contents</h1>
<ul id="menu">
<li>Problem Statement and Project Overview
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>Use Case</li>
<li>Development Timeline</li>
<li>Technology </li>
<li>Data Sources</li>
<li>Team Capabilities</li>
<li>User Interface</li>
</ul>
</section>
You just need to put some content between your a tags
<section class="contents">
<h1 id="contents">Contents</h1>
<ul id="menu">
<li>Problem Statement and Project Overview
<ul>
<li>overview</li>
<li>background</li>
<li>problem</li>
<li>solution</li>
</ul>
</li>
<li>Use Case</li>
<li>Development Timeline</li>
<li>Technology </li>
<li>Data Sources</li>
<li>Team Capabilities</li>
<li>User Interface</li>
</ul>
</section>
I have this rather odd request, and its got me a little baffled.
Essentially I have something like this:
01
A Title
a item
another item
So when the number or the Title gets hovered on. 01 become's white A title becomes red and the list items become white.
Now I know you can do something like
.number:hover .title{
}
But not to sure how to go about this.
<div class="row we-below">
<div class="col-md-3">
<p class="below-num">01</p>
<h4 class="below-title">CONTENT</h4>
<ul>
<li>Research</li>
<li>Strategy</li>
<li>Copywriting</li>
<li>Custom content</li>
<li>Content planning</li>
<li>Campaign framework</li>
<li>Consulting</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">02</p>
<h4 class="below-title">DESIGN</h4>
<ul>
<li>Art Direction</li>
<li>Digital Assets</li>
<li>Animation</li>
<li>Photography</li>
<li>Videography</li>
<li>Graphic Design</li>
<li>Packaging proposals</li>
<li>Studio Recording</li>
<li>Illustration</li>
<li>Branding</li>
<li>Iconography</li>
<li>Website Design</li>
<li>Social Media</li>
<li>Activations</li>
<li>Campaign Strategy</li>
<li>UI Design</li>
<li>UX Design</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">03</p>
<h4 class="below-title">BUILD</h4>
<ul>
<li>App Creation</li>
<li>Packaging</li>
<li>Prototyping</li>
<li>Digital Production</li>
<li>Graphic Assets</li>
<li>Layout & Design</li>
<li>Google Adwords</li>
<li>Style Guides</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">04</p>
<h4 class="below-title">EXECUTION</h4>
<ul>
<li>Media buying</li>
<li>Media planning</li>
<li>Scheduling</li>
<li>Community management</li>
<li>Website Maintenance</li>
<li>Public Relations</li>
<li>Project Management</li>
<li>Corporate Identity Document</li>
</ul>
</div>
</div>
The Desired effect for the on hover
Any Advice or tips would be appreciated. I'd like to learn how to achieve this properly thus the qeustion
you can use sibling css selector
.below-num:hover {
color: white;
}
.below-num:hover + .below-title {
color: red;
}
Try this way
.below-num:hover ~ .below-title {
color: red;
}
.below-num:hover ~ ul li {
color: white;
}
* {
background: black;
color: white;
}
li {
color: gray;
}
.below-num:hover ~ .below-title {
color: red;
}
.below-num:hover ~ ul li {
color: white;
}
<div class="row we-below">
<div class="col-md-3">
<p class="below-num">01</p>
<h4 class="below-title">CONTENT</h4>
<ul>
<li>Research</li>
<li>Strategy</li>
<li>Copywriting</li>
<li>Custom content</li>
<li>Content planning</li>
<li>Campaign framework</li>
<li>Consulting</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">02</p>
<h4 class="below-title">DESIGN</h4>
<ul>
<li>Art Direction</li>
<li>Digital Assets</li>
<li>Animation</li>
<li>Photography</li>
<li>Videography</li>
<li>Graphic Design</li>
<li>Packaging proposals</li>
<li>Studio Recording</li>
<li>Illustration</li>
<li>Branding</li>
<li>Iconography</li>
<li>Website Design</li>
<li>Social Media</li>
<li>Activations</li>
<li>Campaign Strategy</li>
<li>UI Design</li>
<li>UX Design</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">03</p>
<h4 class="below-title">BUILD</h4>
<ul>
<li>App Creation</li>
<li>Packaging</li>
<li>Prototyping</li>
<li>Digital Production</li>
<li>Graphic Assets</li>
<li>Layout & Design</li>
<li>Google Adwords</li>
<li>Style Guides</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">04</p>
<h4 class="below-title">EXECUTION</h4>
<ul>
<li>Media buying</li>
<li>Media planning</li>
<li>Scheduling</li>
<li>Community management</li>
<li>Website Maintenance</li>
<li>Public Relations</li>
<li>Project Management</li>
<li>Corporate Identity Document</li>
</ul>
</div>
</div>
Ok i think i can help:
You will need this in your css:
The first is just what it always will be.
.number .title{
some style
}
The second is is for if you hover on it.
.number:hover .title{
}
If this isn't what you want please clarify i litle bit better.
I've the following code with nested list items as shown below:
<ul style={{padding-top: '15px'}}>
<li style={{margin-left: '20px'}}>First Services</li>
<ul style={{margin-left: '30px'}}>
<li>get1</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get2</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get3</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get4</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get5</li>
</ul>
<li style={{margin-left: '20px'}}>Second Services</li>
<ul style={{margin-left: '30px'}}>
<li>get6</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get7</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get8</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get9</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get10</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get11</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get12</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get13 </li>
</ul>
<li style={{margin-left: '20px'}}>Workflows</li>
<ul style={{margin-left: '30px'}}>
<li>Workflow for someone </li>
</ul>
</ul>
My Goal:
I want some space between the following:
1) First Services and get1
2) get5 and Second Services
3) Second Services and get6
4) get13 and Workflows
5)Workflows and Workflow for someone
How should I go about it? Is adding an empty paragraph tag <p></p> a good idea between each of the above 5 things?
if you mean horizontal space (white space), use:   ;
if you mean vertical space, try: (CSS property) line-height, padding
or margin.
you might want to remove this from being inline and use your linked stylesheet instead as it might cause issues with your styling.
You should use classes for this. Right now, the simplest way is to wrap a div around your whole list, apply a class to it (in my example I used parent_class) and use this selector: div.parent_class > ul >li It only selects the li elements of the first level ul:
div.parent_class > ul >li {
margin-top: 10px;
margin-bottom: 10px;
}
<div class="parent_class">
<ul style="padding-top:15px;">
<li style="margin-left:20px">First Services</li>
<ul style="margin-left:30px">
<li>get1</li>
</ul>
<ul style="margin-left:30px">
<li>get2</li>
</ul>
<ul style="margin-left:30px">
<li>get3</li>
</ul>
<ul style="margin-left:30px">
<li>get4</li>
</ul>
<ul style="margin-left:30px">
<li>get5</li>
</ul>
<li style="margin-left:20px">Second Services</li>
<ul style="margin-left:30px">
<li>get6</li>
</ul>
<ul style="margin-left:30px">
<li>get7</li>
</ul>
<ul style="margin-left:30px">
<li>get8</li>
</ul>
<ul style="margin-left:30px">
<li>get9</li>
</ul>
<ul style="margin-left:30px">
<li>get10</li>
</ul>
<ul style="margin-left:30px">
<li>get11</li>
</ul>
<ul style="margin-left:30px">
<li>get12</li>
</ul>
<ul style="margin-left:30px">
<li>get13 </li>
</ul>
<li style="margin-left:20px">Workflows</li>
<ul style="margin-left:30px">
<li>Workflow for someone </li>
</ul>
</ul>
</div>
.example-list {
margin:0px;
}
.example-list > li {
margin: 30px 0px;
}
<ul class="example-list">
<li>First Services</li>
<ul>
<li>get1</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get2</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get3</li>
</ul>
<ul>
<li>get4</li>
</ul>
<ul>
<li>get5</li>
</ul>
<li style={{margin-left: '20px'}}>Second Services</li>
<ul>
<li>get6</li>
</ul>
<ul>
<li>get7</li>
</ul>
<ul>
<li>get8</li>
</ul>
<ul>
<li>get9</li>
</ul>
<ul>
<li>get10</li>
</ul>
<ul>
<li>get11</li>
</ul>
<ul>
<li>get12</li>
</ul>
<ul>
<li>get13 </li>
</ul>
<li style={{margin-left: '20px'}}>Workflows</li>
<ul>
<li>Workflow for someone </li>
</ul>
</ul>
I would do the following (or something similar - keep in mind it's not good practice to have <ul> as a child of another <ul> - you can validate here: http://validator.w3.org/). Remove the inline styles, you'll deal with A LOT of headaches later if you write you CSS as you have. Set classnames for the bits you want extra space for (you can edit the {{20px}} below for how much space you want (or if you want left/right margins, you can edit the whole rule).
<style>
.title {
margin-left: 20px;
}
.top-list {
padding-top: 15px;
}
.top-list .spacer-top {
margin-top: {{20px}};
}
.top-list > li > ul {
margin-left: 30px;
}
</style>
<ul class="top-list">
<li class="title">First Services</li>
<li class="spacer-top">
<ul>
<li>get1</li>
</ul>
</li>
<li>
<ul>
<li>get2</li>
</ul>
</li>
<li>
<ul>
<li>get3</li>
</ul>
</li>
<li>
<ul>
<li>get4</li>
</ul>
</li>
<li>
<ul>
<li>get5</li>
</ul>
</li>
<li class="title" class="spacer-top">Second Services</li>
<li class="spacer-top">
<ul>
<li>get6</li>
</ul>
</li>
<li>
<ul>
<li>get7</li>
</ul>
</li>
<li>
<ul>
<li>get8</li>
</ul>
</li>
<li>
<ul>
<li>get9</li>
</ul>
</li>
<li>
<ul>
<li>get10</li>
</ul>
</li>
<li>
<ul>
<li>get11</li>
</ul>
</li>
<li>
<ul>
<li>get12</li>
</ul>
</li>
<li>
<ul>
<li>get13 </li>
</ul>
</li>
<li class="title spacer-top">Workflows</li>
<li class="spacer-top">
<ul>
<li>Workflow for someone </li>
</ul>
</li>
</ul>
I need a dropdown like this inside a tab like this, I want the dropdown as tab using Materialize. How can I do this?
HTML:
<nav class="nav-extended">
<div class="nav-wrapper">
<div class="top-nav">
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
</div>
<ul class="side-nav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
<ul class="drop-tab">
<li>
<!--Disabled Tab-->
</li>
</ul>
<ul materialize="tabs" class="tabs tabs-transparent">
<li class="tab space-tab"><a class="active" href="#test2">Test 2</a></li>
<li class="tab">Disabled Tab</li>
<li class="tab">Test 4</li>
<li class="tab">Test 2</li>
<li class="tab">Disabled Tab</li>
<li class="tab"><a materialize="dropdown" href="#" class="dropdown-button" data-activates="dropdown1">Dropdown</a></li>
</ul>
</div>
</nav>
<div>something</div>
<ul id="dropdown1" class="dropdown-content black white-text">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
CSS:
.tabs {
overflow-x: visible !important;
overflow-y: initial !important;
}
JS
$(document).ready(function() {
$('.dropdown-button').dropdown();
});
Dropdown in nav-extended what you want is an open issue for more information you can see the following link - github issues #3920
I have a list as follows:
<ul id="menu">
<li>Home</li>
<li>Work
<ul>
<li>CSS Development</li>
<li>Graphic Design</li>
<li>Development Tools</li>
<li>Web Design</li>
</ul>
</li>
<li>About</li>
<li>Contact Us</li>
<li>Feedback</li>
</ul>
I am attaching an image of so far what I have done.
In this menu, I want to align feedback to the right side.
How can I do it?
Add this to your CSS content.
li:last-child will select the last li of the menu list.
Demo
#menu > li:last-child
{
float:right;
}
Just use float: right;:
<ul id="menu">
<li>Home</li>
<li>Work
<ul>
<li>CSS Development</li>
<li>Graphic Design</li>
<li>Development Tools</li>
<li>Web Design</li>
</ul>
</li>
<li>About</li>
<li>Contact Us</li>
<li style="float: right;">Feedback</li>
</ul>
You can check the demo here.
Aside from float you can also use position:absolute inside of a position:relative container. (Inline CSS for example purposes only.)
<ul id="menu" style="position:relative;width:1008px;height:40px;display:block;">
<li class="right" style="position:absolute;right:20px;">
Feedback</li>
I had the same question but for the whole list.
Float does not realy work there, so here is what worked for me:
ul{
direction:rtl;
}
This way all your li elements including their ::marker's will be pulled to the right of the parent container.
You can also combine this with selectors to just move single li elements.
ul:first-child,
ul:nth-child(2),
ul:last-child{
direction:rtl;
}
This will pull the entire menu to the right and have the dropdown sub menu pull right also instead of displaying off the screen.
<div class="top-menu">
<ul class="nav navbar-nav pull-right"><li class="dropdown dropdown-user">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="icon-settings"></i>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a href="page_user_profile_1.html">
<i class="icon-user"></i> My Profile
</a>
</li>
</ul>
</li>
</ul>
</div>