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.
Related
So the below picture shows a list of many components-panel__row classes, but I want to be able to target just the one that is linked to the highlighted section.
So this code:
<style>
.components-panel__row > label[for="post-author-selector-0"], #post-author-selector-0 {
display: none;
}
</style>
I'm able to hide the Author label and the selector, but the components-panel__row that is linked to those two, has a margin-bottom that I'd like to remove, but the problem that I'm having is if I do .components-panel__row remove margin, it will remove it from all of the class names.
If anyone could help me, I'd appreciate it.
You can use the :nth-child(n) selector.
div:nth-child(4){
display:none
}
or:
.components-panel__row:nth-child(4){
display:none
}
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 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 li already styled in a stylesheet. I need it to stay a specific style. It is styled without using a class, so for example
.selectors{width:50px;}
li{
padding:10px;
}
Now i have run into a problem. I am trying to style the li again, without any classes like what i have in the example code. For example
.options {width:30px;}
li{
padding:50px;
}
What i was wondering is, is there any way to attach certain elemnts to another element. I'm not sure if this is making any sense, but I am trying to have one LI only be applied to a certain part of the page, and the second be applied to another part of the page. Is this possible without using classes? I can't modify the code or add classes otherwise the script doesn't work. Can someone help if I am making any sense at all.
A very common way to do this is
#content li { ... }
#sidebar li { ... }
so the li will behave differently inside two different elements with different IDs. Say, if content is a div, and sidebar is a div, then the li will behave differently inside these two divs.
It is also possible to be "within a class":
.items-to-watch-out-for li { ... }
This is a good way to avoid "too many classes", which is called "classitis", like in this article:
http://www.ehow.com/how_2284990_classitis-html-css-descendant-selectors.html
It's never going to be the nicest way if you can't add classes.
Potentially if the uls are in the same container you could try:
ul:first-child li {}
This will allow you to style the first ul however you want then the generic:
ul li {}
Will take care of the second.
This method should work in all browsers apart from IE6.
http://www.quirksmode.org/css/contents.html#t17
動靜能量 solution is the ideal way.