I am pretty new to CSS. There seems to be a ton of properties and values and it is a bit overwhelming. I am currently trying to emulate a stylesheet I found online. I am currently stuck on this portion
.tabs nav li.tab-current {
...
...
...
}
I understand .tabs is class and .tabs nav is the nav within where the tabs class I used in the html page. Same goes for li. I'm not sure what the .tab-current means and how it is being used. I'm not sure where to look to find notes/documentation on this topic.
The structure looks something like this
<div class="tabs">
<nav>
<ul>
<li class="tab-current">Hey</li>
<li>hello</li>
</ul>
</nav>
</div>
I just added the ul tags in there since most li tags are found within them.
Anyway, the li.tag-current part of the selector just means that it's going to select the Hey and style it.
From the looks of it the tab-current class acts much like an active class you'd put on a list item or a menu item to show that it's the currently selected item.
li.tab-current means li element with class tab-current.
So basically your CSS rule will be applied to all li tags with class tab-current being inside nav elements which are inside elements with class tabs
Related
So I don't really know how to phrase this, but I'll give it a shot.
On my website I have a navigation bar on the left. The paragraph and link elements are styled in the CSS. Now I have one link in my navigation bar with a unique id (the only one) that I do not want to inherit from the navigation bar's CSS.
It looks something like this:
<nav id="leftbar">
<p>Navigation area 1</p>
Home
Link 1
Link 2
Link 3
Link 4
</nav>
So leftbar is styled in CSS as nav#leftbar. <p> is styled as nav#leftbar p. Links are styled as nav#leftbar a and nav#leftbar a:hover. Now I added a new block to my CSS using #special. But because it's a link element and it's inside the navigation bar tags, it still inherits all properties from nav#leftbar a.
Is there any way to change that, or do I have to move the link with the "special" id outside of the navigation bar tags? I'd rather not do this as it is part of the navigation bar, just different.
I also tried adding the CSS properties of nav#leftbar a to #special and change them to overwrite them, but it still prioritizes nav#leftbar a.
You can use the :not() pseudo-class to exclude the link with the special id:
nav#leftbar a:not(#special) {
color: red;
}
#leftbar a:not(#special):hover {
color: gold;
}
<nav id="leftbar">
Special
<p>Navigation area 1</p>
Home
Link 1
Link 2
Link 3
Link 4
</nav>
so
a:not(#special) {
text-decoration:none;
font-size:24px;
color:red;
}
links
links
links
links
links
The problem is that nav#leftbar a is much more specific than #special. The former contains one id and two tags, the latter just one id.
I would change the id leftbar to a class leftbar and also remove the tag name in front of it in css, so you would target .leftbar a and .leftbar p. Then #special is more specific because it contains an id. (Classes are more significant than tags, ids are more significant than classes.)
If you know that #special is always the first entry of #leftbar, you also could target it using something like #leftbar a:first-child, without the need for an id.
i have a site, 4yourtype.com. On the home page there is a button "Blood Type Diet App" i'm tryin to replace it with a dropdown menu button. However whenever i add the following the drop menu does not appear but does seem to be working:
<div class="Cusdropbtn">
<button onclick="cusMenu()" class="Cusdropbtn has-child">I'm here to...</button>
<div id="myDropdown" class="Cusdropbtn-content">
<ul>
<!--edit links here-->
<li>Weight Loss</li>
<li>Gain Energy</li>
<li>Reduce Stress</li>
<li>Immune & Seasonal Support</li>
<li>See Best Sellers</li>
</ul>
</div>
</div>
I have tried replacing and removing most of the css and just cant seem to find what is stopping it from functioning properly. Any help would be greatly appreciated. I tried replacing the code between the <li></li> tag where the current button resides.
Now that I understand your problem, I've discovered the solution. You have conflicting styles in your menu: specifically your dropdown list (.Cusdropbtn-content ul) and generic lists in the header (.sf-menu ul, .PageMenu li ul).
You'll see that the latter styles both have the same or higher specificity and are defined later in stylesheets with higher priority than yours.
My first note is that your custom styles should be included after the base styles in your HEAD element to ensure that any style you overwrite have priority. Second, both .sf-menu ul and .PageMenu li ul set the position of the list to absolute, which means that it's being moved out of its container. You should have something like postion: static !important on .Cusdropbtn-content ul if you want to ensure that it is unaffected by the offending styles.
I've this code generated with php:
<li class="current"><li>Page1</li></li>
<li><li>Page2</li></li>
<li><li>Page3</li></li>
<li><li>Page4</li></li>
I want to add a css property to tag a inside to list with class current.
I've tried with .li + li + a {property:attribute} etc...
Any suggestions ?
////////////////////// Edit
Ok guys... We did nothing. I tried to simplify the code. Here is the whole code (generated by wordpress):
http://pastebin.com/GJ3zXd93
You can use:
li.current li a
But most likely the double list items are a mistake, so you probably want to use this instead:
li.current a
Also, as a sidenote, the "." in the selector you wrote is trying to find elements with a class of "li", not a list item element.
With the recent update of your question:
I think I know what's going on here. You probably have a widget generating the menu for you. The call to the widget is inside a ul in your PHP. The widget generates the menu inside a div. You are probably also using arguments for the widget call to wrap each menu item inside an li. Which would give you the structure you have:
<ul>
<div>
<ul>
<li><li></li></li>
</ul>
</div>
</ul>
To fix, find where you are calling the widget, and remove the ul that's wrapped around it. Then remove the before and after arguments from the widget call. That should give you this structure:
<div>
<ul>
<li></li>
</ul>
</div>
Then you should have an easier time styling the menu.
You want:
.current a {}
(All links which are descendant of the .current element).
I have a form with three struts2 tags after each other. When the page is rendered, the s:select tag is automaticly transformed to the html shown at the bottom.
Now the problem is that i'm trying to style the form to display these dropdowns in a horisontal line. But with this code i can not set id's or classes of any of the elements. They all get autogenerated ids and i can only set cssClass on the select itself, not on the ul or li's
I can however set an id on the form element itself. But i am a newbie at css so i couldnt get it to work. So the question is: How can i style the following html to display the li elements inline when i only have access to set the form id and class? Preferably the labels should be above the select box.
Oh. And I forgot to mention that there is already a css that is styling all these elements in a different matter. The divs have display attributes set, that will break the displays in the li's. So how can I tell the browser to "nevermind all that styling you normally do on the form, on this occasion just plain simply display these elements inline"
Or another solution, can i switch to just use a plain old tag? And if so how to populate it with items and setting displayvalue and id value?
<ul>
<li>
<div id="xxxx">
<label>Somelabel</label>
</div>
<div id="ssdf">
<select id="sfsd" name="xx" class="this i can control">
<option>1</option>
<option>2</option>
</select>
</div>
</li>
<li>Second dropdown etc</li>
</ul>
You can use the descendant selector W3C docs
#formid ul{
overflow:hidden; /* to autosize height based on contents*/
}
#formid li{
float: left; /* but you need to make sure that all li elements to not have a combined width larger than the ul containing them*/
}
I've never come across this problem before and its quite annoying me. I have a list which when hovered over, a box appears around it.
I have a list set out like the following
<div id="sidebar">
<h2>Our Services</h2>
<ul>
<li>Furniture</li>
<li>Kitchens</li>
<li>Bedrooms</li>
<li>Flooring</li>
<li>External Joinery</li>
<li>Commercial Work</li>
<li>Staircases</li>
<li>Tiling</li>
</ul>
</div>
But for some reason firefox doesnt render the whole list item as a link, only the text.
It works across other browsers (even IE) but not firefox.
Change
<li>Furniture</li>
To
<li>Furniture</li>
Inside a UL you are supposed to have LI elements, not anything else. However, inside the LI you can have other tags such as A
Update
You can set the style of A to display:block as mwgriffith suggested on comments.
or to make the whole line a link you can also assign a click event on the LI, here is an example using jQuery
I figured it out, instead of having the <li> display the background I used display:block on the <a> tags and uses the a:hover to create the background.