Can someone explain to me why this doesn't work?
<html>
<head>
<style>
body:first-child
{
color:#f00;
}
</style>
</head>
<body>
<div>I should be red.</div>
<div>This is not red.</div>
</body>
</html>
From what I've read, the first-child selector should select the first div object from the body tag. If it's not selecting the div element, what is it selecting?
The :first-child pseudo-class in body:first-child operates on the body tag, so its the body tag that is a first child of its parents that will be selected, if you want the body's first child use the child selector
body > :first-child{
color:#f00;
}
this will give you the first child of the body.
To target the first div, you need to do body div:first-child. Right now (I assume) you're just selecting the first-child body. (Actually I'm not entirely sure what you're selecting right now, come to think of it. I don't think the first-child selector is valid to hang directly on the body tag.)
body div:first-child {
color:#f00;
}
This CSS will color it as you expect. Read it as "the div that is the first child of body."
Your CSS is saying select any BODY element that is the first child of its parent element which would be the HTML element. BUt HEAD is the first-child not BODY.
At least I think that's correct :-)
To target the first div of body you can use this,
body div:first-of-type {
/* style */
}
Related
Why this code doesn't work?
::selection:first-child{
background-color: #ffa563;
}
This works fine - :first-child:last-child (when element is first child AND last child)
::selection is not an element. try :first-child::selection should work.
:first-child::selection {
color: red;
}
<div>First Child</div>
<div>Second Child</div>
You mixing up pseudo class and pseudo element. ::selection is pseudo element, so it doesn't contain anything and only work with few css attributes.
If you want to style selection in first child, use :first-child::selection instead
When you try to use a selector like "::selection" or ":first-child" it´s better if you specify the container.
<div>
<p>text 1</p>
<p>text 2</p>
</div>
and the css:
div p:first-child::selection {
color: red;
background: yellow;
}
the first 'p' will show different if you select.
Note that :first-child will never adjust to the selectors listed before. For example, p:first-child will not match for a structure of <div><h1></h1><p></p></div> since the p is the second tag.
Similarly, a ::selection:first-child would also not match the first tag in the selection but only a selected element that is also a first child. And at that point, it’s equivalent to :first-child::selection.
As for why it doesn’t work, ::selection is a pseudo element. Using it creates some kind of an element that is matched. But that pseudo element never exists in the DOM, so it cannot be the first child of something. So the whole selector will not match.
I have a list of DIVs that share the same classes as follows:
<div class="content1"><div class="contentInner">Text1</div></div>
<div class="content1"><div class="contentInner">Text2</div></div>
<div class="content1"><div class="contentInner">Text3</div></div>
...
I want the first DIV with class="content1" to have a different style than the following DIVs of the same class. What is the CSS selector that can accomplish this?
Thanks
Use nth-of type selector.
.content1:nth-of-type(1){
/* your style */
}
Using first-child only works if there is no sibling element before your desired div.
See fiddle here.
CSS has a pseudo selector which is used in such scenario where you need to select the first element from similar elements i.e. :first-child
The :first-child CSS pseudo-class represents any element that is the first child element of its parent.
Example:
div.content1:first-child{
/* your css */
}
Js Fiddle Demo
Use :not and :first-child pseudo selector of CSS to give specific css to the first div.
Example:
.content1:not(:first-child) {
/* Common CSS for all divs except first div */
}
.content1:first-child {
/* CSS for first div */
}
you can use the :first-child selector. e.g
.content1:first-child{
text-decoration:underline;
}
fiddle
I may have two types of html...
One:
<div>
<h4></h4><!--not to this-->
<p></p>
</div>
Two:
<div>
<h4></h4><!--this should be styled--->
<h4></h4>
<p></p>
</div>
All styling are the same but just border-bottom to h4 of first h4 tag only if it contains two h4 tags as in the example. How to do without changing html?
You can combine :first-child, :not() and :only-of-type pseudo-classes to achieve that.
Here you go:
h4:first-child:not(:only-of-type) {
background-color: gold;
}
WORKING DEMO.
This selector represents the <h4> element which is the first child of its parent whereas it's not the only of TYPE of elements in the children tree of the parent.
From the MDN:
The :only-of-type CSS pseudo-class represents any element that has
no siblings of the given type.
Let's go Crazy!
If the <h4> element is not the first child of its parent, we can select the first <h4> element and achieve the same effect by using :first-of-type pseudo-class as follows:
h4:first-of-type:not(:only-of-type) {
background-color: gold;
}
UPDATED DEMO.
For further details on :first-of-type vs :first-child you can refer my answer here.
you need to style the border-bottom of your 1st h4 only if the parent contains two adjacent headings
you could then style the border-top of the 2nd h4 and obtain the same effect
h4 + h4 {
border-top: ...
}
When you have one heading only, no style will be applied. If you have two or more adjacent headings, a border between them will be applied
This is what you need:
h4:first-child:nth-last-of-type(n+2)
{
color:green;
}
FIDDLE
You can use the First-child class.
I could look like this:
div h4:first-child{
CODE HERE
}
I think you are better off styling the second h4 if possible, as you would not be able to tell with CSS whether there are one or two h4's in the div.
You can do this with nth-child
div h4:nth-child(2) {
// your styles.
}
Fiddle
I have this code.
<div class="myDiv">
<div>
I want to be red.
</div>
</div>
<p>I'm some other content on the page</p>
<div class="myDiv">
<div>
I want to be blue.
</div>
</div>
.myDiv div:nth-child(odd) {
color: red;
}
.myDiv div:nth-child(even) {
color: blue;
}
I see why it's not working. It's making every odd div within myDiv be red. What I want it to do is make every odd example of a div within myDiv be red. How can I write that?
Here's a JSFiddle.
There are a couple of problems here. The :nth-child is on the wrong element. The inner divs are always the first child, so the :nth-child(odd) selector works for both. Instead move to
.myDiv:nth-child(odd) div
...however this does not work either because of the <p>. A working solution with your sample is
.myDiv:nth-of-type(odd) div
http://jsfiddle.net/tvKRL/1/
NOTE that the nth-of-type only works because the .myDiv elements are all divs (it's based on the element, not the selector), so the selector ignores the <p>. If there can be another div between .myDivs I don't think any CSS will work for what you want to do.
You can't do this generically, for the reason given by Domenic. To put it simply: there's no selector that lets you filter an existing subset of matched elements.
On the off chance that among your p and div.myDiv siblings the only div elements are the ones with that class anyway, then you could use :nth-of-type() to have it look at those intermediate divs only:
div.myDiv:nth-of-type(odd) div {
color: red;
}
div.myDiv:nth-of-type(even) div {
color: blue;
}
Or if there are other divs without that class which should be excluded, then unless there is some sort of pattern in which they're laid out, you're out of luck.
This is not possible. There is no CSS selector that will do what you want, as you can see by perusing the complete list of selectors.
In general CSS selectors do not "reach out" to encompass elements above the DOM tree of the one selected. You are asking for something even more sophisticated than that, combining characteristics of parent elements with ordinal properties of the targeted elements, even though those targeted elements are distributed among entirely different places in the DOM tree.
Just applynth-childto the first member of the descendant selector, not the last one.
div:nth-of-type(odd) > div {
color: red;
}
div:nth-of-type(even) > div {
color: blue;
}
<div class="myDiv">
<div>
I want to be red.
</div>
</div>
<p>I'm some other content on the page</p>
<div class="myDiv">
<div>
I want to be blue.
</div>
</div>
Here is an sample example
<html>
<head>
<style>
.test > input { //this is wrong.
color:red;
}
</style>
</head>
<body>
<div class="test">
<div>
<input></input>
</div>
</div>
</body>
</html>
What I want to do is apply a style to input element. How to select a input element. with the help of div's css style name.
you can just use .test input (which will apply to every input in <div class="test">).
Your CSS with > only selects direct descendants
If you want to apply style to input using div with class="test", you can do like this
<style>
.test > div > input {
color:red;
}
</style>
div.test input{
}
will style all inputs nested in the div of class test
div.test input:first-child{
}
will style only the first nested input.
the ">" operator only styles directly descendent elements, so it will not style your inputs because you have div.test > div > input, the div in between div.test and input makes it so the input is not directly descendent to div.test
As none of the other answers have mentioned this before, for this particular case you could also use the * selector. It matches descendants that are grandchildren or later descendants. You would use it like so: .test * input.