If I have tabs like this in html:
<ul class="qtabs">
<li>tab 1 title</li>
<li class="active">tab 2 title</li>
<li>tab 3 title</li>
</ul>
<div class="tab-container">
<div id="tab1">
<div class="tab-content">text, text, text, text....</div>
</div>
<div id="tab2" style="display:none;">
<div class="tab-content">text, text, text, text....</div>
</div>
<div id="tab2" style="display:none;">
<div class="tab-content">text, text, text, text....</div>
</div>
</div>
Is it possible with CSS only to make hover-effect (change textcolor of .tab-content for the tab that user is hovering over ? (it's ok if it only works with css3)
Possible duplciate?
Is there any way to hover over one element and affect a different element?
Kind of, but nothing has happened in 4 years then? :-)
You can't get exactly what you want unfortunately, but perhaps this is close enough for what you need.
If you allow the hover to work on .qtabs instead of each individually li. Then you can use a combination of the sibling selector and the standard descendant selector to meet your needs:
.qtabs:hover ~ .tab-container .tab-content {
color:red;
}
Here is a working example
The benefit of this approach is that it requires no changes to your existing HTML structure, and without JavaScript which I assume you are trying to avoid for whatever reason.
Need each tab page to have a different colour?
Then why not try our new and improved version
The problem is that you need to check the children of ul to see which is active and then reverse back up the DOM to get to tab-content. This is how you could write that rule...
ul li.active:hover + .tab-container #tab1 .tab-content {color:#f00;}
HOWEVER it is not currently possible to do this in CSS.
This behaviour is frequently requested and is more commonly known as a "parent selector" however, .
If you can change your markup and maybe include something on the ul which will enable you to identify the tab then you could do something like this:
ul.activeTab1:hover + .tab-container #tab1 .tab-content {color:#f00;}
ul.activeTab2:hover + .tab-container #tab2 .tab-content {color:#f00;}
which would be almost what I think you are after..
http://jsfiddle.net/qdgtx4jc/
Related
<BrowserRouter>
<div>
<NavigationBar />
<Switch>
<Route exact path="/" component={Root} />
<Route path="/Path1" component={Path1} />
</Switch>
</div>
</BrowserRouter>
How can I give all the components (Root, Path1) a 15% left and right margin, but not the navigation bar, without applying it individually in each of the routes?
I have tried applying the style to Switch and a div that wraps the Switch but none of these worked (see CodeSandbox).
Wrap the Switch with a div and apply the styles to it. For example:
<div style={styles}><Switch>....</Switch><div>
The routes get built in the following structure:
<div id="root">
<div>
<nav>
<div>Route</div>
</div>
</div>
As such, you can target the routes specifically with:
#root > div > div {
margin: 0 15%;
}
Note the use of >. This is known as the child combinator, and only targets the immediate children. This means that only <div> elements that are a direct child of <div> elements, which in turn are a direct child of #root, will be targetted.
I've created an updated version showcasing this here.
Hope this helps! :)
When facing problem like this, use the point-and-click inspector tool (⌘ + shift + C).
Upon inspecting, you will see your navbar structure to be this:
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li role="presentation" class="">Route1</li>
<li role="presentation" class="">Route2</li>
</ul>
</div>
</nav>
So to target all the <li>, you can simply do
.nav>li {
margin: 0 15%
}
Or .nav>li>a if you intend want to apply directly onto the link.
CSS Specificity Score
Something that you must understand in order to write predictable CSS and avoid scenario like this all together!
For example. let's say if after applying the margin as above, you do this:
li {
margin: 0;
}
You would realize this style wouldn't get applied at all due to lower specificity score.
.nav > li has a class and an element.
li only has an element, hence lower score.
It's something really simple to understand but unfortunately not so many people know about.
5 min read to understand CSS Specificity Score
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 :).
Given the following html:
<ul class="nav">
<li class="level0">..</li>
<li class="level0">..</li>
<li class="level0 active">
Category Name
<ul class="level0">
<li class="level1 active">
Sub-category
<ul class="level1">
<li class="level2 active">
I only want this link styled
</li>
</ul>
</li>
</ul>
</li>
<li class="level0">..</li>
</ul>
How do I only style that nested link, considering that each parent li also has a class of 'active'? I thought I could use .nav .active:last-child > a which works in the above example, but removing the active class from that li.level2 you would expect then that the li.level1 above it would be styled, but it is not (see jsfiddle below for an example of this).
I may just be having a brainfart but I can't think of a way to target that element with only css. The only thing I can think of is to use javascript to remove the 'active' class from the parent elements, but I feel like there must be some other way.
Here is a more elaborate jsfiddle example that illustrates two test cases: http://jsfiddle.net/K4e37/
Is this possible without changing the markup and without using javascript?
Edit: I wasn't thinking about last-child correctly but here is an updated example which gets pretty close to what I want, just need to not style the higher level elements: http://jsfiddle.net/K4e37/2/
Based on other answers (here, here), the answer to your question is no. As summarized there, "last-of-type" does not work with classes and "last-child" does not work with the sub-nesting structure in your HTML. I think you'll have to change the markup or use Javascript.
List item
If you don't even have the 'level' classes, still you can target your specific html link with the below selector( if you only needs that specific link to be styled ). Please link if your requirement fulfills!
Usiong CSS:
ul.nav li ul li ul li.active a {
color: #FF0000;
}
Cheers :)
so I have been trying all this stuff with first-child and everything and none seem to be working. If I have a div set up as such:
<div class="content">
<div class="thing">
abd
</div>
<div class="thing">
</div>
<div class="thing">
123
</div>
<div class="thing">
<li class="list" goal="target">
1
</li>
</div>
<div class="thing">
<li class="list">
2
</li>
</div>
<div class="thing">
<li class="list">
3
</li>
</div>
<div class="thing">
<li class="list">
4
</li>
</div>
</div>
what line of css that will be able to target only the first li element in the .content div (the one with the attribute goal="target")
now this can be fairly messy and there can be anywhere from 0 to 10 divs without a li before the first that contains one.
I have tried nearly anything with first-child, but it always targets every single li because they are in divs.
here is a jsfiddle if you want to try things
In CSS the format is grandparent parent element child... and :nth-child gives you the element the number specified down, so for your case that would be
.content .thing:nth-child(4) li {
/* CSS goes here */
}
In your example .content is the grandparent, .thing (the fourth one) is the parent, and of course the li is the element. Spaces are required for distinguishing in between levels in CSS.
Here is a working jsFiddle
Edit Without it being hard coded it's impossible to select the first li no matter who it's parent is without javascript.
Here is a jQuery fix:
$('.content').find("li").eq(0).css({ /* CSS goes here */});
Here is a straight javascript fix:
var elems = document.getElementsByTagName('li')[0];
elems.style.property="value";
OK first things first, goal is an invalid attribute so you shouldn't be using it. If you need custom attributes you should be using data-attributes
In order to target an element by attribute you should be using an attribute selector in your case the following selector would work.
li[goal="target"]{
/* Your styles go here.*/
}
I need a CSS selector that can find the 2nd div of 2 that has the same class. I've looked at nth-child() but it's not what I want since I can't see a way to further clarify what class I want. These 2 divs will be siblings in the document if that helps.
My HTML looks something like this:
<div class="foo">...</div>
<div class="bar">...</div>
<div class="baz">...</div>
<div class="bar">...</div>
And I want the 2nd div.bar (or the last div.bar would work too).
Selectors can be combined:
.bar:nth-child(2)
means "thing that has class bar" that is also the 2nd child.
My original answer regarding :nth-of-type is simply wrong. Thanks to Paul for pointing this out.
The word "type" there refers only to the "element type" (like div). It turns out that the selectors div.bar:nth-of-type(2) and div:nth-of-type(2).bar mean the same thing. Both select elements that [a] are the second div of their parent, and [b] have class bar.
So the only pure CSS solution left that I'm aware of, if you want to select all elements of a certain selector except the first, is the general sibling selector:
.bar ~ .bar
http://www.w3schools.com/cssref/sel_gen_sibling.asp
My original (wrong) answer follows:
With the arrival of CSS3, there is another option. It may not have been available when the question was first asked:
.bar:nth-of-type(2)
http://www.w3schools.com/cssref/sel_nth-of-type.asp
This selects the second element that satisfies the .bar selector.
If you want the second and last of a specific kind of element (or all of them except the first), the general sibling selector would also work fine:
.bar ~ .bar
http://www.w3schools.com/cssref/sel_gen_sibling.asp
It's shorter. But of course, we don't like to duplicate code, right? :-)
UPDATE: This answer was originally written in 2008 when nth-of-type support was unreliable at best. Today I'd say you could safely use something like .bar:nth-of-type(2), unless you have to support IE8 and older.
Original answer from 2008 follows (Note that I would not recommend this anymore!):
If you can use Prototype JS you can use this code to set some style values, or add another classname:
// set style:
$$('div.theclassname')[1].setStyle({ backgroundColor: '#900', fontSize: '1.2em' });
// OR add class name:
$$('div.theclassname')[1].addClassName('secondclass'); // pun intentded...
(I didn't test this code, and it doesn't check if there actually is a second div present, but something like this should work.)
But if you're generating the html serverside you might just as well add an extra class on the second item...
HTML
<h1> Target Bar Elements </h1>
<div class="foo">Foo Element</div>
<div class="bar">Bar Element</div>
<div class="baz">Baz Element</div>
<div class="bar">Bar Second Element</div>
<div class="jar">Jar Element</div>
<div class="kar">Kar Element</div>
<div class="bar">Bar Third Element</div>
CSS
.bar {background:red;}
.bar~.bar {background:green;}
.bar~.bar~.bar {background:yellow;}
DEMO
https://jsfiddle.net/ssuryar/6ka13xve/
What exactly is the structure of your HTML?
The previous CSS will work if the HTML is as such:
CSS
.foo:nth-child(2)
HTML
<div>
<div class="foo"></div>
<div class="foo">Find me</div>
...
</div>
But if you have the following HTML it will not work.
<div>
<div class="other"></div>
<div class="foo"></div>
<div class="foo">Find me</div>
...
</div>
Simple put, there is no selector for the getting the index of the matches from the rest of the selector before it.
And for people who are looking for a jQuery compatible answer:
$('.foo:eq(1)').css('color', 'red');
HTML:
<div>
<div class="other"></div>
<div class="foo"></div>
<div class="foo">Find me</div>
...
.parent_class div:first-child + div
I just used the above to find the second div by chaining first-child with the + selector.
Is there a reason that you can't do this via Javascript? My advice would be to target the selectors with a universal rule (.foo) and then parse back over to get the last foo with Javascript and set any additional styling you'll need.
Or as suggested by Stein, just add two classes if you can:
<div class="foo"></div>
<div class="foo last"></div>
.foo {}
.foo.last {}
First you must select the parent element and set :nth-of-type(n) for the parent and then select the element you want. something like this :
#topmenu li:nth-of-type(2) ul.childUl {
This will select the second submenu from topmenu. #topmenu li is the parent element.
HTML:
<ul id="topmenu">
<li>
<ul class="childUl">
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<ul class="childUl">
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<ul class="childUl">
<li></li>
<li></li>
<li></li>
</ul>
</li>