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/
Related
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.
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
I'm looking for a quick and easy way to hide an element on just two pages that is otherwise in the sidebar on all pages. I tried to do it with css but just can't seem to affect this one spot. This is one of the pages and the client wants the FDIC logo in the sidebar gone. I tried adding page ID and the sidebar css to display:none, but can't work out the right combo. Am I on the right track?
#page-id-63 .textwidget
{display:none;}
Thanks for your help!
"page-id-63" is a class, not an id on the page you linked, so you'd need:
.page-id-63 .textwidget {
display: none;
}
#text-9 > .textwidget {
display: none;
}
Try this out, either include it in a tweaks stylesheet specifically for those couple pages or throw it between style tags in the head.
Edit: I see you have the page number defined as a class in the body tag, you can put this in your main stylesheet adjusting the first class for your specific page (ex. .page-id-13 instead of 63) ..
.page-id-63 > #wrapper > #main > #secondary > #text-9 > .textwidget {
display: none;
}
You need
.page-id-63 .widget-area .text-widget {
display:none;
}
as you have many text widgets, and only want to hide the one in the sidebar.
Yes you are on the right track. What you need to do is apply the style and then have a look at the element using your browser dev tools. Then you will be able to see if
The style applied.
If any other styles are overriding it.
Update
Having checked your site now that is out of maintenance mode, try this
.page-id-63 .textwidget{
display: none;
}
I'm wondering it if is possible to display text on a HTML page from a CSS file.
For example for a web host instead of having 100MB display on a plan upon 4 pages and not having to edit each one but the CSS itself.
For example:
CSS
100MB
and than in text
Our plan has {text from css displays here}
Thanks
You can use the :after pseudoselector. Suppose your "our plan has" part has an ID planid, and your HTML looks like this:
<div id = "planid">Our plan has</div>
Then you can do this in the CSS:
#planid:after {
content: ' 100MB'; /*what the element will contain*/
display: inline; /*it's inline*/
/*more styling*/
}
The :after selector creates a pseudo-element after the selected element. To create one before it, use the :before selector.
Little demo: little link.
Used to after before properties
yes do this as like this
HTML
<div>Hello</div>
Css
div:after{
content:'100mb';
}
live demo
more info
you can do this using pseudo elements like :after - http://jsfiddle.net/spacebeers/LQy7T/
.your_class:after {
content: "YOUR TEXT";
color: red;
background: blue;
display: inline;
}
CSS is not designed to do that kind of work, it's for organizing styles and not for managing contents.
What you need is a variable to store your value and then show it many times. So you need PHP, JS, Ruby, Java or your favourite language.
I am using the Drupal ShareThis module. Unfortunately, a recent security release of this module has added a span in the generated code and it disrupts the layout of my page major. Everything was working fine before.
There is no option to control the generation of this code:
<span class="chicklets twitter"> </span>
Is it possible to remove/not display this span code via CSS? If yes how?
I tried:
.chicklets twitter {
display:none;
}
but no success. I am not a CSS expert. Thanks.
UPDATE
Here is a screen shot from FireBug:
I have been trying the suggested solutions:
span.chicklets {
display:none;
}
The above completely removes all ShareThis buttons (which can be explained by the following issue):
span.chicklets.twitter {
display:none;
}
The above removes the button, but the corresponding span still appears in FireBug as shadowed (see next).
Of course, I need to keep my button. What could cause this?
P.S.: Nevermind, I'll discuss this extra issue in another question if necessary.
If you want to set the style of an element with two classes specifically, combine them with no spaces. The dot notation means "class", so you would put a dot before each of them and concatenate them:
span.chicklets.twitter {
display: none;
}
As #AndrewBrock suggested, you can also just use one of the classes, as long as you know that the single class won't affect other span elements in an undesirable manner.
If you need the span to maintain the button, but don't want the span to take up space, then change it to this:
span.chicklets.twitter {
width: 0px;
}
chicklets and twitter are 2 separate classes. You only need to set the display:none in one of these.
span.chicklets {
display:none;
}
I have restricted this to only span elements with the class chicklets.
Note that this could affect other span elements which also have the chicklets class
If you have jQuery running this will do it (remove it versus hide it):
$(".chicklets.twitter").remove();