I want to do this:
.class
{
color: green;
}
On the highlighted item.
Please note, I cannot use the class ".k-in" because it's used elsewhere in this DIV. Also note that the children items are also a span element so I can't use span either.
I want to select ALL of the items that are structured the same as the highlighted item (notice that there are 4 "parent" list items in this DOM so I need to run a color green on each of the parents.
Can anyone give me a hand?
#relationshipsTree>ul>li>div>span{
color: green;
}
Right Click copy css path when clicking on an element in firebug will give you what you're looking for.
Related
I'm trying to make a display: none; at "founds 2 result" et "page 1 to 1" but I don't know how to catch them.
Thanks a lot !
try with css
.search-filter-results#search-filter-results-540{
display:none;
}
or Js
var element=document.getElementById('search-filter-results-5');
element.style.cssText="display:none;";
Can I select a text element that is outside HTML tags?
You can't because the text you want to modify is not an element.
You should always write content inside tags, let them be <span> or <p> tags. This way you can easily select them, style them etc...
In your case you can still work around this by selecting the closest parent element hoping that it doesn't hold other elements you don't want to affect:
.search-filter-results {
display: none;
}
Again I'm not sure that search-filter-results only contains the elements you want to hide. Maybe it contains other elements, in this case it will hide it too.
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
All anchor links except for one are getting background color changed on focus, except for one.
HTML
<a id="login-as-guest">Cancel and browse as guest</a>
CSS
#login-as-guest a:focus{
background-color: yellow;
}
Any ideas?
To use focus you need to assign a tabindex to the element as it is not an input. Otherwise you could use active. Also your code is not correct. Currently it is looking for an a element within an element with that ID.
The correct way would be
a#login-as-guest:focus{ background-color: yellow; }
Both ways:
DEMO http://jsfiddle.net/kevinPHPkevin/t2hbS/
An anchor tag without a href attribute can not receive focus (at least in Chrome, but I think it is standard behaviour). Also you selector is incorrect, you are trying to select an a that is a descendant of #login-as-guest. The selector should be a#login-as-guest:focus, which will select a a with an id of #login-as-guest that has focus.
Have a look at the updated fiddle: http://jsfiddle.net/VKvBy/1/
I have a design for a bullet list that has two things:
a. A blue arrow image replacing the list icon
b. A very light dotted border atop and below each list item.
I'm wanting to build this into CKEditor via (CKEDITOR.stylesSet) so that the user can select this particular style of list from a dropdown and not have to write any code to do so.
I have had success to the point where I can create a list with a particular class (and now have that themed), however, am running into issues given that it seems the only way to apply both the dotted line and the blue arrow is to use multiple backgrounds via CSS3, which, SURPRISE, doesn't work in IE8 or below.
If I added some DOM pollution (I.e., surrounded the list item text in a span) I could theme that; however, it seems CKEDITOR.stylesSet only allows for setting one element per style (I.e., I can set ul as an element or li as an element, but there's no way I can use one style to set a class on the UL and surround the text of the child li elements with a span).
Or is there? I'm thinking of falling back to JavaScript for this, but I'm also open to other suggestions to accomplish what I'm doing.
Thanks!
There's no need to use background images for either the arrow or the dotted line. You can do both via CSS. All you need CKEditor to do is apply a class to the (which it sounds like you already are) and then use CSS similar to this:
.styled li {
border-top: dotted 1px black;
border-bottom: dotted 1px black;
}
.styled
{
list-style: square url('http://www.wcb.ny.gov/site_images/blueArrow.gif')
}
Full working example: http://jsfiddle.net/jwynveen/ZhjCK/
I am using MVC3.
I have a table and an Html.ActionLink inside of it.
I have already set the text decoration for none, but the link is still blue. I change the table:hover background-color and the color(of the text), and when I put the mouse over the row, the text that are not a link gets white, but the link still blue. If I change the a:hover, the link gets white just when I put the mouse over it, and not just over the row.
Is there a way to do that with css?
Typically, to cover all the anchors when you are hovering over the row.
#tableid tr:hover a {
/* Your Styles */
}
But this does not work on all IE browser so, use JS to catch the event and apply styles to anchors in it.
use the following css:
#yourTableId:hover a {
color: #FFF;
}
you can replace #yourTableId also with table and / or .yourTablesClass depending on where the css should be used ;)
this works also for child elements e.g.:
#yourTableId div:hover a
#yourTableId tr:hover a
so in general we can say you can use the following:
#yourTableId *:hover a
where * is a tagname, classname or id (dont forget class and id prefixes -> .classname and #idname)
here a jsfiddle example