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>
Related
in the following snippet, how come the strong selector overrides the id selector? Isn't an id selector considered more specific, thus having priority?
<!doctype html>
<html>
<head>
<title>Sample document</title>
<style>
strong{color:red;}
#abc {color:blue;}
</style>
</head>
<body>
<p id="abc">
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
You are correct with specificity, but selectors only work with the direct content of the element. So the text color is different for the strong elements because it is nested deeper and the p selector isn't able to change the color for those elements. So if you did want to change the strong elements for #abc you would do it like this
strong { color: red; }
#abc strong { color: blue; }
and if you wanted strong tags text to be the same as the p text then you would do this
#abc, #abc strong { color: red; }
strong { color: red; }
#abc strong { color: blue; }
#def, #def strong { color: red; }
<p id="abc">
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
<p id="def">
<strong>ABC</strong>
DEF
</p>
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; }
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 am wondering how i would be able to style links inside a given div with a given class like
.navigation-div : a:link,a:visited {
color:red;
}
Some html
<div class="navigation-div">
Home
List
Download
Files Used
Documentation
</div>
<div class="client-header">
<h1>CRUD Application</h1>
</div>
Is there a selector for this kind of thing?.
.navigation-div a:link, .navigation-div a:visited {
color:red;
}
jsFiddle example
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>