I have the following code
<div class="wrapper">
<nav id="sidebar">
<ul class="list-unstyled components">
<li class="navhead">My Title</li>
<li> Introduction</li>
<li>
First Category
<ul class="collapse list-unstyled" id="firstCategory">
<li>Intro</li>
<li>First Item</li>
...
<a id="firstItem"></a>
<div id="firstItemDiv" class="internal">
...
I used to hide the internal class in my $(document).ready(function () with $('.internal').hide(); if a URL parameter was specified. However, this caused DOM/Page flicker, so I added .internal {display: none} to my .css file and now call $('.internal').show(); in my ready when the parameter is specified.
In other words, Intro always shows, but First Item should only show when the URL parameter is specified.
This works great for my firstItemDiv, but my sidebar internal li element (First Item) still shows. How can I get it not to show by default?
(true confessions: I was able to peek at the actual page with the issue)
The issue here was that there was a more "specific" rule that was overriding the "internal" class rule.
There was a rule with "id" specificity:
#sidebar ul li a {
display: block;
}
and another with class specificity:
.internal {
display: none;
}
changing the second one to:
#sidebar .internal, .internal {
display: none;
}
should fix it.
You should attach css also. If I understand correctly you change .internal ( hiding or showing ) and it works for id='firstItemDiv' and doesnt work for class="sidebar internal" because it uses some javascript propably...
Try to use
$(".internal').css("display" , "none!important") instead of $(".internal").hide() and
$(".internal').css("display" , "block!important") instead of show().
Related
Im trying to get my hover selecting work properly.
Im having two classes in a li element.
It may have the class named disabled , or it may have a class called wait , or it may have both disabled and wait
I want this hover to only work on the li element with the class named wait, but only if disabled class is not on it.
How can i achieve this?
Current attempt:
.group li:.wait:not(.disabled):hover {
// do something
}
You had a : after your li, which signified that the following element in your query would be a pseudo-class. However, you just wanted a simple class selector: .wait.
.group li.wait:not(.disabled):hover {
color: red;
}
<ul class="group">
<li>None</li>
<li class="wait">Wait</li>
<li class="disabled">Disabled</li>
<li class="wait disabled">Wait and Disabled</li>
</ul>
Given the following html:
<ul class="nav">
<li class="level0">..</li>
<li class="level0">..</li>
<li class="level0 active">
Category Name
<ul class="level0">
<li class="level1 active">
Sub-category
<ul class="level1">
<li class="level2 active">
I only want this link styled
</li>
</ul>
</li>
</ul>
</li>
<li class="level0">..</li>
</ul>
How do I only style that nested link, considering that each parent li also has a class of 'active'? I thought I could use .nav .active:last-child > a which works in the above example, but removing the active class from that li.level2 you would expect then that the li.level1 above it would be styled, but it is not (see jsfiddle below for an example of this).
I may just be having a brainfart but I can't think of a way to target that element with only css. The only thing I can think of is to use javascript to remove the 'active' class from the parent elements, but I feel like there must be some other way.
Here is a more elaborate jsfiddle example that illustrates two test cases: http://jsfiddle.net/K4e37/
Is this possible without changing the markup and without using javascript?
Edit: I wasn't thinking about last-child correctly but here is an updated example which gets pretty close to what I want, just need to not style the higher level elements: http://jsfiddle.net/K4e37/2/
Based on other answers (here, here), the answer to your question is no. As summarized there, "last-of-type" does not work with classes and "last-child" does not work with the sub-nesting structure in your HTML. I think you'll have to change the markup or use Javascript.
List item
If you don't even have the 'level' classes, still you can target your specific html link with the below selector( if you only needs that specific link to be styled ). Please link if your requirement fulfills!
Usiong CSS:
ul.nav li ul li ul li.active a {
color: #FF0000;
}
Cheers :)
Myself in the beginning stages of javascript want to achieve the following.Say I had some li tags which are further included with some li tags like this.
<ul>
<li>
<ul>
<li class="2"></li>
<li class="2"></li>
<li class="2"></li>
</ul>
</li>
<li>
<ul>
<li class="2"></li>
<li class="2"></li>
<li class="2"></li>
</ul>
</li>
</ul>
Now class 2 block is hidden originally in the page.My work is when someone hovers on a link of class 1 its respective block ( i.e., class 2) should display.But the code i had written is displaying all blocks having class 2
May be i can write a mouseover() function for each link of class 1,but is it correct?I had seen this type effect in some sites like linked in,awwwards.com
Example link is
Best Colorful Websites | Web Design Inspiration
In this link when mouse is hovered on a image,then for only on that image a symbol is display on corner bottomI want this type effect.
Can any please help me??Thanks in advance??
Well this can be achived with css only:
ul ul{
display:none;
}
ul > li:hover ul{
display:block;
}
try a fast css solution (not tested because you did not put a jsFiffle code axample)
ul li:hover ul li.2
{
display:block;
}
also, do not use only numbers in class names... will not work on some browsers
try class="c2" at least
Situation, such a menu:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
When I hover "LANGUAGES" I need to show up the other :
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
Necessary to make it work on CSS, JQuery or without JavaScript. Here's a version does not work:
.hover_top_right_menu {
display: none;
}
It's a wrong line
.top_right_submenu: hover, hover_top_right_menu {
display: visible;
}
You have some typos in your css
by default the element .hover_top_right_menu should have display: none. When you hover the submenu then you change its display (with display: block).
.hover_top_right_menu {
display: none;
}
.top_right_submenu:hover .hover_top_right_menu {
display: block;
}
Anyway this css is based on the assumption that the language list is nested into .hover_top_right_menu element, e.g.:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
As a side notes:
Unless you need to have an action on click event, the link around "LANGUAGES" is not necessary for the example
you're using empty markup, probably for styling purpose only. If you need to have an icon just place it as a background of that list-item (or as content property of its :before pseudoelement)
I have an auto generated Wordpress menu that's created the following:
<li class="page_item page-item-23 page_item_has_children">
Main item 1
<ul class="children">
<li class="page_item page-item-52498 current_page_item">
Item 1
</li>
<li class="page_item page-item-52496">
Item 2
</li>
<li class="page_item page-item-52477">
Item 3
</li>
</ul>
</li>
I want to say when I'm on the first sub item, highlight the main li.
This is the CSS I'm using (ideally this would be more simple but due to the nature of the auto generated menu it's a bit messy!):
.page-item-52498.current_page_item li.page-item-23 a {
color:white!important;
font-family:'Museo Sans W01 500'!important;
}
At the moment this doesn't make the first li a white.
That CSS selector doesn't work. You cannot select the .page-item-23 as a child of .page-item-52498, as it is a container for the other in the markup structure.
Have you tried outputting the page ID using the body_class function of WordPress? Then you could try using a selector such as body.page-id-52498 li.page-item-23 a or similar.
The body_class function is used as such (most probably in the header.php template file of WordPress):
<!-- <head> somewhere above -->
<body <?php body_class(); ?>>
<!-- rest of the template somewhere below -->
It should output something similar to this (with a dynamic ID number of course):
<body class="page page-id-112 page-template logged-in admin-bar">
Whenever you've used body_class and it outputs the specific page ID you've declared in the CSS selector I wrote above it will take effect (following standard cascading rules of course).
One for the future - the subject selector should be arriving in CSS4. It's going to be very powerful but easy to abuse I think.
Syntax
!subject > selector {
/* declarations */
}
Example
!ul > li {
border: 1px solid green;
}
Scrolling down to the Parent Selector: http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/
And http://css4-selectors.com/selector/css4/subject-of-selector-with-child-combinator/