How do I match the first element type of a parent element without matching that child element if it is not the first child?
I need a CSS selector that matches the first child element if it is a header element of the body parent element:
<body><header>
But I can not have the selector match the header element if it is not the first child of the body element:
<body><div></div><header>
You're simply looking for :first-child.
body > header:first-child {
color: yellowgreen;
}
<body>
<header>Should match</header>
</body>
<body>
<div></div>
<header>Shouldn't match</header>
</body>
Other than this, You can also use nth-child(1). Below snippet will work since header is the first child of parent body
body > header:first-child {
background: tomato;
}
<body>
<header>Header 1</header>
</body>
This will not work as div is the first child of the parent element:
body > header:first-child {
background: tomato;
}
<body>
<div></div>
<header>Header 1</header>
</body>
body header:first-of-type:not(nth-child(n+2)) { background: black; }
Related
link[type*="application/*+xml"]
I'm trying to match either rss+xml or atom+xml so I want to use a wildcard in that spot.
You can use a $ wildcard, which selects element whose attribute value ends with a specified value.
div{
width: 300px;
height: 300px;
}
link[type$="rss+xml"] + div{
background: green;
}
link[type$="atom+xml"] + div{
background: red;
}
<link type="application/rss+xml" />
<div></div>
Wildcard selector is used to select multiple elements simultaneously.
[attribute*="value"] {
// CSS property
}
It will look like this
[class*="str"] {
background: green;
color: white;
}
For Example:-
You can do like this.
<div class="first_str">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-strt">The third div element.</div>
<p class="mystr">Paragraph Text</p>
Now it will select all classes, named with str like:-
first_str, my-strt, mystr
I have this css but I'm not sure what it means.
.container {
& * > .content {
color: red;
}
I know if I have this
.container {
&.content {
color: red;
}
It will affect elements with class='container content'
I also know, that * targets all elements and > targets direct childs.
So, this means that color: red will apply to all .content that are direct children of .container?
& * > .content this will select all elements with .content class which are direct children of any element which are children of .container
for your case use this selector: & > .content
.container {
& * > .content {
Compiles to:
.container * > .content
Or:
Any element that is a member of the class content and which is a child of any element which is a descendant of an element of the class container.
In other words: Any .content descendant of .container that is not a child of .container.
.container *>.content {
color: blue;
}
<div class="container">
<div class="content">
No match because the * doesn't match an element between .container and .content
<div class="content">
Match because the * <strong>does</strong> match an element between .container and .content
</div>
<div>
No match because this is not a .content
</div>
</div>
</div>
"direct children" is not a term used in CSS. There are children and there are descendants. There is no such thing as an indirect child.
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}
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;
}
i have an html as below
<!DOCTYPE html>
<html>
<head>
<style>
p{font-size:14pt;color:red;}
</style>
</head>
<body>
<div>
<p> this is a p without class defined</p>
</div>
<div class = "temp">
<p> this is a p tag in another div</p>
</div>
<div class = "test">
<p> this is a Original Mail</p>
<p class="hello"> this is a p tag </p>
<p> this is a p without class defined</p>
<div> this is a div tag
<p> this is a p tag within the div</p>
</div>
</div>
</body>
</html>
i want to apply the style to all p Tags within the div with class test.
i tried putting like div.test > p{font-size:14pt;color:red;}
but then the style is not getting applied to the p tag within the child div of div with class name test.
please help me to sort out this.
JSFiddle: http://jsfiddle.net/8K2yL/
The selector you want is:
div.test p {
font-size:14pt;
color:red;
}
This will select all p tags that are anywhere inside a div.test tag.
The selector div.test > p will only select p tags that are DIRECT children of div.test.
Specifying the tag name right after the class name selects all the matching tags found inside the class.
.test p{
font-size:14pt;
color:red;
}
The > selector selects direct decendants. Therefore children of children will be ignored.
Change to this:
div.test p {
font-size:14pt;color:red;
}
Just do like below
div.test p{
font-size:14pt;
color:red;
}
Fiddle for you DEMO
<style>
div.test p{
font-size: 14pt;
color: red;
}
</style>