CSS complex selector: select the second child of a div item - css

I'm try to write a complex selector for css3.
I need to select the second div of a child of a an item:
here the html code for my test:
<!DOCTYPE html>
<html>
<head>
<style>
div.main > div:nth-child(3) {
display: none;
}
</style>
</head>
<body>
<div class="main">
-> 1-level
<div>
-----> 2-level
<div>--------> 3-level BAR</div>
<div>--------> 3-level FOO</div>
</div>
</div>
</body>
</html>
i need to select the 3-level FOO ! but i can't append another class other .main class
I'm trying with 'div.main > div:nth-child(3)' without any success....
here a jsfiddle with this code.
http://jsfiddle.net/vwwuuhao/1/


I think you missunderstood the way nth-child() works. It is used to select the nth-child of an element and not the "nth-level-child".
Your selector should look like this :
.main > div > div:nth-child(2) {
display: none;
}
.main > div > div:nth-child(2) {
display: none;
}
<body>
<div class="main">
-> 1-level
<div>
-----> 2-level
<div>--------> 3-level BAR</div>
<div>--------> 3-level FOO</div>
</div>
</div>
</body>


Do like this:
div.main > div > div:last-child {/*or use div:nth-child(2)*/
display: none;
}


div:nth-child(3) is the third sibling child. You are looking for:
// vvv — this is 2nd level
// vvv — this is 2nd level
// vvv FOO is a second sibling
div.main > div > div:nth-child(2)


try to use div:nth-of-type(x)
sample here: https://jsfiddle.net/L6xkanrm/1/
eg:
if you want to select the SECOND div inside another div, use:
div div:nth-of-type(2) {
display: none;
}

Related

How to exclude some class when parent class is selected

I'm sorry if this is a silliest question that you've ever found. I wanna find some "shortcut" to make this happen. Here's the example:
<body>
<div class="wrapper">
<nav></nav>
<aside></aside>
<footer></footer>
</div>
</body>
I wanna give some style into the all of .wrapper content, except for the footer. Is it possible to handle it? Or... Is there any CSS selector for an exception?
NOTE: Please don't give me an "easy way" solution like this:
nav {
//some style
}
aside {
//some same style
}

Thats quite easy. Just do it as follows:
.wrapper > *:not(footer) {
color: green;
}

This may be helpful.
The * refers all elements and *:not(footer) says all elements except footer element.
This .wrapper *:not(footer) stands to select all elements except footer inside .wrapper class.
This is how it works.
.wrapper *:not(footer) {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #cccccc;
color: #000000;
}
<body>
<div class="wrapper">
<nav>01</nav>
<aside>02</aside>
<footer>03</footer>
</div>
</body>

Select div by contains with css

I have a simple markup and I would like to select a div by it's content. Here is my code...
<div class="parent">
<h4>Child of parent</h4>
<div>
<div>I'm red!</div>
<h4>I'm red's sister</h4>
<div>I'm blue!</div>
<h4>I'm blue's brother</h4>
</div>
</div>
and selecting <div>I'm red!</div> with the following CSS...
div:contains("I'm red!") {
color: red;
}
since contains() is deprecated or never got implemented, I can do the following...
.parent div:nth-child(1) {
color: red;
}
.parent dh4:nth-child(2) {
color: red;
}
to target just the first two elements, and it worked, but I would like to know if it is a way I can target just the first two element which happened to be <div> and <h4> in one CSS line of code? I need to do this without javascript. Eventually I need to target just 3rd and 4th.

Yes. Use :nth-child(-n+2).
For the 3rd and 4th you can use :nth-child(n+3):nth-child(-n+4) or just :nth-child(-n+4) and let specificity fix it for you.
The logic is easy:
:nth-child(-n+a) selects the a-th element and its previous siblings
:nth-child(n+a) selects the a-th element and its following siblings
:nth-child(n+a):nth-child(-n+b) selects the a-th and b-th elements, and the siblings in-between.
.parent > div > :nth-child(-n+4) {
color: blue;
}
.parent > div > :nth-child(-n+2) {
color: red;
}
<div class="parent">
<h4>Child of parent</h4>
<div>
<div>I'm red!</div>
<h4>I'm red's sister</h4>
<div>I'm blue!</div>
<h4>I'm blue's brother</h4>
</div>
</div>

I don't think I understand your question. You can do that to have it on one line anyway.
.parent div:nth-child(1), .parent dh4:nth-child(2) {color: red;}
or you could apply a red class on the first two divs and do :
.red{color:red}

CSS style the last element in a document

In the following code I want to add styling specifically to the content of the last "B".
<div class="A">
<div>
I am <span class="B">foo</span>.
</div>
<div>
I like <span class="B">bars</span>.
</div>
<div>
Actually, call me <span class="B">FOOBAR</span>.
</div>
</div>
I have been trying
.B:last-of-type { color: red; }
and all classes "B" get selected because it uses the last occurence in it's immediate parents child elements. i.e. in it's direct siblings
Is there any way to only select the last occurence of "B" in the whole document?

You can do it like this
.A div:last-of-type .B { color: red; }
Fiddle Demo
or
.A div:last-child .B { color: red; }
Fiddle Demo

Try this JsFiddle Demo
.A div:last-child .B{ color: red; }

Found the answer! CSS3 get last element
I was doing a version of this but I found it ugly, I guess this is the only way. I will keep this Question open for a bit to see if anyone has any better suggestions.

.A span.B:last-child
{
background:#999;
}

.A div:last-child .B:last-child
{
background:orange;
}

css or jquery on hover show only the hidden children element of current div

Following is the html structure, that is repeating inside my html page.
<article class="tweet-inner">
<div class="tweet">
<div class="text">
<p>Coming down! Time for Croation BBQ </p>
</div>
<p class="last">
<span class="pull-right">
<small> Hello this is first text </small>
<small> Hello this is second text </small>
</span>
</p>
</div>
</article>
The above is one unit of repeating structure inside my HTML.
The functionality I want is, when you hover over the tweet text, .tweet .text p then the content of .last should show.
I did the following :
.last{
display: none;
}
.tweet .text p:hover .last{
display: block;
}
Two doubts :
You should be able to see the .last of only the element upon which you have hovered.
The above is not working, the fiddle is http://jsfiddle.net/EymLT/
Thanks!

Your CSS selector is incorrect. Firstly .last is not a child of .text, and the p element cannot be hovered because it is invisble. Try this:
.tweet:hover .last{
display : block;
}
Updated fiddle

Replace your last style with this:
.tweet .text:hover + .last{
display : block;
}

You can use ~ in CSS
DEMO http://jsfiddle.net/kevinPHPkevin/EymLT/4/
.last{
display:none;
}
.text:hover ~ .last{
display : block;
}
If you replace my ~ with > it will be more browser compatable. The > ensures only the child is seleted so you can use a parent div as the hover target.
.last{
display:none;
}
.tweet:hover > .last{
display : block;
}

#test, #test2 :hover Hover should trigger for both test divs

As the title shows, is it possible to name several elements and apply the same :hover command to them all.
So I don't have to do this:
#test:hover > .info, #test2:hover > .info {}

You could make a class and apply it to those elements. For example:
<head>
<style type="text/css">
.myClass:hover > .info {
background-color: blue;
}
</style>
</head>
<body>
Test Link One
<span id="test2" class="myClass">Test Link Two</span>
</body>

Resources