I have a pure CSS drop down menu that is working great but I want to have a drop down arrow on the parent menu items that have children to show the user the menu has choices/options. I have this currently:
/* drop down arror */
nav ul li > a:last-child:after { content: ' ▾'; }
This puts a drop down arrow next to EVERY menu item EXCEPT the ones with children. So what I need is an exact opposite to this. I wish there was an a:has-child or a:is-parent. Any one know how to do this without going the JavaScript route or image route?
Thanks in advance for your help to my question
Gosh, I was able to solve this just now using trial and error using the following code:
nav ul li > a:not(:last-child):after { content: ' ▾'; }
The thing about it is I had tried this originally and it didn't work.
nav ul li > a:not:last-child:after { content: ' ▾'; }
So the key is you have to use the parenthesis with the :not modifier which I was not aware. Basically the not operator did the "opposite" of what I had and poof it worked.
It looks like you already have a selection similar to what you want, it's just reversed. Try putting that arrow on every single item and then using the selector you created to hide it on those items it shouldn't show. The arrow will be left over on the items you couldn't select.
I'm afraid there is no method available at the moment to select the parent element via CSS.
If there was a way to do it, it would have been visible in the CSS selector specs:
CSS3 Selectors
I'd say that your options are to either asign different classes to the ul, e.g <ul class="parent"> and <ul class="sub-menu"> so you can select them in CSS, or target the parent elements via javascript
Related
I'm trying to write the css styles for a two level ordered list, and using the ::before to display the index of the listitem. Everything works fine, except the index of the parent li is somehow displayed in the content of the li as well.
Heres the fiddle project with the problem:
jsfiddle.net/h3nt9bfw/
In the li with index 8 there is a 8 at the top right of the li content, and I'd like to remove it, but cant seem to make the css right. Please someone advise. Thanks.
you can get rid of it using this-
ol.subQuestions.sortableQuestionLists.ui-sortable.ui-droppable:before {
content: ""!important;
}
you could simplify the selector but thats the basic idea here
I am having trouble targeting a specific element. I'm trying to change the background color of a widget. My problem is this widget is used in a few spots on the site, so if I change something via CSS, it changes in all the widgets. I've been trying different selector combos via inspecting the element. I can't quite find the right one. The site is here http://titanpanama.com/newsite/ I'm trying to change the backgound-color of the list items under the heading Specials. I've tried
.specials-home .home-estate-widget .post-list li{ background-color:#000; }
I've tried adding a class to the container. Where am I going wrong?
To specifically target the list items in Specials widget, use this:
.specials-home ul.post-list li {
background: #000;
}
Try this:
div#my_poststypewidget-18 > .specials li {
background-color: gold;
}
It targets all children elements that are li in element with class .specials.
My website has two different css style documents. The first is specifically for the index page, which uses lists to do the tabs at the top for a link bar between the title and the rest of it. This has the code:
index.css:
u1
{
list-style-type:none;
}
along with some code which applies to the li elements.
The other css document is for the rest of the site. I want to use lists for some of the other parts, but I'm having an issue. While the li elements are overwriting properly, I can't get u1 element to show the bullets in the rest of the site. I've tried using u1.a and u1.b , but that doesn't fix it.
main.css:
u1
{
list-style-type:circle
}
Try overwriting it by adding !important
u1
{
list-style-type:circle!important;
}
and/or add another CSS file with just this rule to the page you want to be different.
The element is ul as in UL not u1 and in u-one. I assume this is not a typo of the code because it's all over the place in your question.
CSS work by cascading and specificity. Having list style apply to other elements of your site might be as simple as adding a class:
ul.circle {
list-style-type: circle;
}
and then adding the same class to your element in the HTML document, as such:
<ul class="circle"></ul>
There are many different ways to override CSS, and I described them in an answer of sometime ago, but in your case this should be the easiest.
sorry to probably reiterate what was already said, but if you wanted to make your 'u-one' class, you should prepend a dot to it, so it is either a class:
.u1 {list-style-type: circle;}
And you will use it as a usual class, ie
<ul class="u1"> <li></li> </ul>
or use ul [UL] as a tag:
ul {list-style-type: circle;}
and all your UL lists will have this formatting.
The way you put it in your css will not work with html because the 'u1' tag does not exist.
But I'll need to see a snippet of your html to be sure.
I have a footer navigation where I'm using dividers called from:
#footnav li:before {
content:'\00B7';
}
I can't target the first child so that the dots do not show before the first element. I'm trying:
#footnav li:first-child {
content:'';
}
And I've also tried calling the class that is tied to the menu item in wordpress. Since it's wordpress I can't go in and put an actual span tag for the first targeted li. Is there a trick with wordpress?
This is the site (topic, footer nav):
http://thegoodgirlsnyc.com/holly/
Try this:
#footnav li:first-child:before {
content:'';
}
Along the way, set your #footnav a class to display as inline-block to fix the alignment properly.
The css content: property is not intended to be used the way you're trying to (for replacing text). For that you'd need to use javascript instead. Content can only be used on pseudo-elements (e.g. :before) to insert text, not with pseudo-selectors (e.g. :first-child) to replace text.
A good example of where you might want to use the content property is if you want to insert an arrow after a link:
a:after {
content:' >';
}
For more info you could read this: http://css-tricks.com/6555-css-content/
I have got a CSS division called home which has got certain attributes with an action for hover for the anchor tags inside the home division like this:
#home a:hover
{
background-image:url(images/template_03_1.png);
position:relative;
top:3.5em;
left:0.5em;
}
Now, what I want to do is access the 'home' id's attributes inside the block defined above so that I change the properties of the home division whenever some one hovers on an anchor tag inside the home division. I know this is very easily possible in JavaScript but is this possible using CSS only.
Thanks,
niting
Am I correct if I assume you want the following?
#home a:hover
{
#home.background-color: #fff;
}
If so, then: no. Not without JavaScript and not even with CSS3. You cannot edit an others rule's properties.
Recursion is also not possible, as you always style that what was selected last in the rule, so typing #home a:hover styles the anchor if hovered, #home .class styles anything that has class="class" and is a decendant of #home.
In other words, recursion with CSS-selectors is not possible (or I don't know about it...)
You could try setting the hover on #home itself, but that won't work in IE(6). Unfortunately, you can't style a parent based on a child's pseudo-class. Javascript is great for this.
If you have exactly one <A> in your <DIV> then maybe you can style your <A> to have the same dimensions like the surrounding <DIV> and give the <A> the desired background.