I have been trying to figure this one out, but can't seem to get it right, perhaps I'm way off with my thoughts, but this is it.
I have no control over the UL class names, they are what they are. I can only change the class name of the , the code is as below:-
<div class="custom-parent-div-name-changeable">
<div class="custom-child-div-name-changeable">
<div class="cant-change-this">
<ul class="name-cant-be-changed">
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
</div>
</div>
</div>
The problem I have is the "name-cant-be-changed" class for the UL has a background and border set. I need to remove the background and border in another stylesheet, using the !important selector due to limitations in the software used to power the website.
The major setback is this same class ("name-cant-be-changed") is used twice on the page. so I need to create CSS for the "name-cant-be-changed" which is inside "cant-change-this" div class. Both instances of "name-cant-be-changed" are within a div with class "cant-change-this", but have different parent class names, eg. "any-old-name", like so:-
<div class="parent-div">
<div class="any-old-name">
<div class="cant-change-this">
<ul class="name-cant-be-changed">
<li>apple</li>
<li>orange</li>
<li>banana</li>
</ul>
</div>
</div>
</div>
How can I create separate CSS for the UL class "name-cant-be-changed" which is rendered based on the parent in which both reside?
I tried using the following, with various combinations of the class names to no avail:-
.custom-child-div-name-changeable > .name-cant-be-changed {
background: none !important;
border: none !important;
}
Can anybody shed some light on this? Thanks in advance!
The > operator means "direct child of preceding selector". I think you want something like this:
.custom-child-div-name-changeable .name-cant-be-changed {
background: none !important;
border: none !important;
}
or
.custom-child-div-name-changeable > div .name-cant-be-changed {
background: none !important;
border: none !important;
}
or
.custom-child-div-name-changeable > div.cant-change-this .name-cant-be-changed {
background: none !important;
border: none !important;
}
Either:
.any-old-name .name-cant-be-changed {…}
or
.any-old-name > .cant-change-this > .name-cant-be-changed {…}
The first reads: all elements with '.name-cant-be-changed' who have a parent somewhere with class .any-old-name.
The second reads: all elements with .name-cant-be-changed with an immediate parent of .cant-change-this that has an immediate parent of .any-old-name
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>
I try use after selector in my CSS code, but is not well centered.
I use Bootstrap. When I set after selector on li not a, content moves down.
This is my HTML code:
<nav class="navbar">
<div class="row">
<div class="col-md-2">
<img src="/images/logo3.png" class="img-responsive">
</div>
<div class="col-md-5">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Prices</li>
</ul>
</div>
<div class="col-md-5">
<ul class="nav navbar-nav navbar-right">
<li>Projects</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
And this is CSS code:
.navbar-nav li a::after {
content: "|" black;
}
.navbar-nav li:last-child a::after {
content: " ";
}
Here's working fiddle for you - jsFiddle -
FYI : need to expand the result section enough for your menu items to align on a single row.
PS : And I'm just hoping that you use my suggestion number 2 there ( the best would the third, but it depends on what kind of menu you need ). Using pseudo class to get those separators in your menu isn't a good practice. It could save the amount of HTML codes, but that's more like it when you use additional li between those menu items.
EXPLANATION
Your CSS was almost there, but you made a mistake.
content: "|" black;
You can't use CSS shorthand on the content attribute. And you need to give the ::after pseudo class padding-left to make it center-aligned.
Try above jsFiddle Hope this helps.
This is a comment, but I think it's the right answer so ^^
This seems very overcomplex. You should simply use display:inline on your ul's and then use padding for spacing between the list items. You can then float left and right the two individual lists respectively to get the positioning :).
I'm implementing a dropdown list with jsf tags (commandLinks).
I have question about css selector in jsf.
When I hover on a commandLink class "about" I want to change font color of the other 2 commandLinks to red.
Here is my attempt:
In css file
.about:hover .sub{
color: red;
}
<h:commandLink styleClass="about" value="About us ▾" action="/about"/>
<h:commandLink styleClass="sub" value="test1" action="/customers"/>
<h:commandLink styleClass="sub" value="test2" action="/license" />
but nothing changes. I also tried this
.about:hover > .sub{
color: red;
}
It didn't work either.
You are missing things in your menu, you need to understand the parent / children concept. The css selector .about .sub will select childrens sub with a parent about. In your case you have no hierarchy at all.
Almost all menus are using this simple concept :
<ul>
<li class="about">
<h:commandLink value="About us ▾" action="/about"/>
<ul class="sub">
<li><h:commandLink value="test1" action="/customers"/></li>
<li><h:commandLink value="test2" action="/license" /></li>
</ul>
</li>
<!-- ... other top level menus ... -->
</ul>
Now your css selector will work :
.about:hover > .sub {
color: red;
}
I have the following code which is created with a datalist control:
http://jsfiddle.net/vmE2E/1/
But i am unable to float the to ULs side by side with padding in between.
Please can you help?
edit: added code
<span style="display:inline-block;background-color:Transparent;border-color:#404040;border-style:None;" id="DataList1"><span style="color:Transparent;background-color:Transparent;">
<ul class="latest-posts">
<li>
<a href="http://www.site.co.uk/blog/post/using-jquery.aspx">
using jquery<br>
</a>
</li>
</ul>
</span><br><span style="color:Transparent;background-color:Transparent;">
<ul class="latest-posts">
<li>
<a href="http://www.test.co.uk/First-Blog-Post.aspx">
First Blog Post<br>
</a>
</li>
</ul>
</span></span>
css
ul.latest-posts
{
width:500px;
border:1px solid black;
}
ul li.latest-posts
{
float:left;
}
That is some unusual/unnecessary use of markup (inline block span, span used as containers for block elements, etc). Simply removing that <br> will put your sections next to one another (but not because they float but because they are span, meaning they stay inline)
see fiddle for code and demo
Fiddle: http://jsfiddle.net/vmE2E/2/
Demo: http://jsfiddle.net/vmE2E/2/embedded/result/
I have an ul with 7 li inside of it. I know that I can style the first and last li but is it possible to style the last 3 li's so the text is a different colour? This is the first time I have come across this problem/dilemma. I have googled around a bit and have not found much that is really helping me.
<div class="international-portfolio">
<div class="international-portfolio-title"> Sales Representation International</div>
<ul class="nobullet inline int-portfolio ">
<li class="excelsior-hotel-ernst first">
<li class="le-mas-candille">
<li class="mandarin-oriental-hotel-group-worldwide">
<li class="victoria-jungfrau-grand-hotel-spa">
<li class="palace-luzern">
<li class="eden-au-lac">
<li class="bellevue-palace last">
</ul>
</div>
ive updated the coding - trying the solutions given but not working at the moment but will keep at it.
This should do the trick (but mind you, it won't work in older versions of IE):
http://reference.sitepoint.com/css/pseudoclass-nthlastchild
Use the css selector as follows:
li:nth-last-child(-n+3) {
/*stuff here*/
}
Here's an example, too:
http://jsfiddle.net/yAUwb/
You can use:
li:nth-last-child(1), li:nth-last-child(2), li:nth-last-child(3) {
color: red;
}
It is kinda of possible with this code
.myList li:nth-last-child(1),
.myList li:nth-last-child(2),
.myList li:nth-last-child(3)
{
color: red;
}
Demo: http://jsfiddle.net/2np58/