So i've always had some misunderstanding with nth child and selectors.
I have been trying to figure it out but after searching I could not find the answer.
This is my css
p.hi:nth-of-type(1) {
color: blue;
}
This is my html
<div class"head">
<p class="hi">This is some text.</p>
</div>
<div class"head">
<p class="hi">This is some text.</p>
</div>
Currently this css is applying the color blue to both paragraphs. How do I make it only add it to the first? I know that if i put them both in the same div it works but what if it is nested several times. How do i select only one?
Take a look at this fiddle.
http://jsfiddle.net/x9jkq0x3/
You can do it like this Fiddle
div:nth-of-type(1) p.hi {
color: blue;
}
<div class="head">
<p class="hi">This is some text.</p>
</div>
<div class="head">
<p class="hi">This is some text.</p>
</div>
you can use first-child to class head instead class hi
this is the example Fiddle
Related
How to change CSS for the Div in the 1st line having h3 text "Example Text1"
<div class="test">
<div>
<h3> Example Text1 </h3>
</div>
</div>
<div class="test">
<div>
<h3> Example Text2 </h3>
</div>
</div>
You can't apply a CSS rule based on the contents on an element with CSS only, with the exception of the :empty selector. :contains has been a suggested selector but has not been implemented.
You will either need to use JS, or apply CSS based on the ordering of the elements you have, for example in this case you could use
.test:first-of-type h3 {
color: red;
}
To only style the first h3 tag.
You could also look into something like :contains() from jQuery if you don't mind adding a dependency.
You can't give CSS to div having a child with specific text. But you can use :first-child CSS.
.test:first-child h3 {
color: red;
}
<div class="test">
<div>
<h3> Example Text1 </h3>
</div>
</div>
<div class="test">
<div>
<h3> Example Text2 </h3>
</div>
</div>
I have some code html like:
<div style=color: green>
<span style="color:black>Some text</span>
<p style="color:red>Some text</p>
<div style="color:blue>Some text</div>
</div>
I want all 'Some text' have red follow by it's parent, please help!
Welcome to SO Dear
Use * selector with !important as you use inline style so
!important need for override that.
div *{
color: inherit !important;//parent color you can change it
}
<div style="color: green">
<span style="color:black">Some text</span>
<p style="color:red">Some text</p>
<div style="color:blue">Some text</div>
</div>
And also you missed " around your styles
the best and smart way to make that is creating a class to reuse the code in a future, you can make this
.custom-parent > .custom-child{
color:green !important;
}
<div class="custom-parent">
<p class="custom-child">some text</p>
some text
<spam class="custom-child">some text</span>
</div>
I recommend the parent div to have a class like parent.
From there, I would do.
.parent {
color: green;
}
.parent * {
color: inherit !important;
}
.test:nth-child(1),
.test:nth-child(2),
.test:nth-child(3) {
color: #0F0
}
<div class="test">
<p>Test</p>
</div>
<div class="reuinIt">
<p>Test</p>
</div>
<div class="test">
<p>Test</p>
</div>
<div class="test">
<p>Test</p>
</div>
https://jsfiddle.net/dkfj2xzj/13/ <- UPDATED with my jQuery code if it helps
Why is it not skipping the .ruinIt class and not targeting the third .test?
I'm adding <div>s dynamically and when a <div> without the .checkDrop class is added I need to skip it.
Thanks
It's because the nth-child selector does not mean it's the nth of that specific class. It means that it's the nth sibling overall.
So the nth-child(2) refers to your .reuinIt class, however, it does not also have the .test class and therefore it does not receive any styling.
Your last .test class is the nth-child(4) however that has no styling rules applied.
If you'd like to see a working example, I've updated your fiddle here.
EXAMPLES
The :nth-child
The important thing to remember here is that the :nth-child selector specifically targets HTML elements based on their index/position inside their containers/parent elements.
Have a look at the example below and take note of how the corresponding commented :nth-child selector's index continues to increment regardless of the type of element it's targeting.
<div id="container">
<h1>Heading 1</h1> <!-- h1:nth-child(1) -->
<p>Paragraph 1</p> <!-- p:nth-child(2) -->
<p>Paragraph 2</p> <!-- p:nth-child(3) -->
<h2>Heading 2</h2> <!-- h2:nth-child(4) -->
<p>Paragraph 3</p> <!-- p:nth-child(5) -->
</div>
The :nth-of-type
The cool thing about :nth-of-type is that it ignores all of the other elements that are not of the same type, i.e. if the element you are targeting is a <p>, it will ignore all of the surrounding "non-<p>" elements when calculating its index.
The below example will provide you with a basic understanding of the indexing rules that :nth-of-type follows:
<div id="container">
<h1>Heading 1</h1> <!-- h1:nth-of-type(1) -->
<p>Paragraph 1</p> <!-- p:nth-of-type(1) -->
<p>Paragraph 2</p> <!-- p:nth-of-type(2) -->
<h2>Heading 2</h2> <!-- h2:nth-of-type(1) -->
<p>Paragraph 3</p> <!-- p:nth-of-type(3) -->
</div>
A little more complexity with :nth-of-type
It is however very important to remember that :nth-of-type bases it's indexing values on the HTML Element Type regardless of the CSS Class you are using to call the property.
Have a look at the below example:
<div id="container">
<h1>Heading 1</h1> <!-- h1:nth-of-type(1) -->
<p class="my-class">Paragraph 1</p> <!-- .my-class:nth-of-type(1) -->
<p>Paragraph 2</p> <!-- p:nth-of-type(2) -->
<h2 class="my-class">Heading 2</h2> <!-- .my-class:nth-of-type(1) -->
<p class="my-class">Paragraph 3</p> <!-- .my-class:nth-of-type(3) -->
<h1 class="my-class">Heading 3</h1> <!-- .my-class:nth-of-type(2) -->
</div>
This example is a little more complex, but it helps if you see CSS Declarations as a sort of filtering rule. For example, if create a CSS declaration by typing:
p:nth-of-type(2) {
background-color: red;
}
I am essentially telling the browser 2 things:
Only <p> tags should be affected and,
Only if they are the second <p> tags amidst their siblings
The difficulty comes in when I write CSS that looks like this:
.my-class:nth-of-type(1) {
background-color: red;
}
By not specifying an element type, my rule essentially reads with the following filter:
Only elements with the class my-class should be affected and,
Only if those elements are the first sibling of their type of elements.
If were to apply the above CSS to the HTML in the example (see fiddle for working example), we would get an output that looks like this:
In the output above, you'll see that both the first <h2> and the first <p> elements were affected regardless of whether or not their siblings had the my-class class name applied.
The code .test:nth-child(2) doesn't mean "the second element of the class test in its container". It means just "element that has a test class and is the second child of its container".
The behavior you expected can be expressed with CSS Selectors 4 as :nth-child(2 of .test). Unfortunately, this syntax is currently supported only in Safari.
Try below code for targeting nth-child:
You can first parent div for all child div.
.parent_div .test:nth-child(1) {
color: red;
}
.parent_div .test:nth-child(3) {
color: red;
}
.parent_div .test:nth-child(4) {
color: red;
}
<div class="parent_div">
<div class="test">
<p>Test</p>
</div>
<div class="reuinIt">
<p>Test</p>
</div>
<div class="test">
<p>Test</p>
</div>
<div class="test">
<p>Test</p>
</div>
</div>
.test:nth-child(2) selector means select an element having class .test when it is 2nd child of its parent. Similarly .test:nth-child(3) will select 3rd element of a parent if it will have .test class.
In your case 2nd element doesn't have .test class so it is not selecting it. If you wants to target them 3rd div element you need to use .test:nth-child(3)(As it is 3rd element of its parent, not 2nd).
Correct selector will be:
.test:nth-child(1), .test:nth-child(3), .test:nth-child(4) {color: #0F0;}
.test:nth-child(1), .test:nth-child(3), .test:nth-child(4)
{color: #0F0}
<div class="test">
<p>Test0</p>
</div>
<div class="reuinIt">
<p>Test1</p>
</div>
<div class="test">
<p>Test2</p>
</div>
<div class="test">
<p>Test3</p>
</div>
You can try this:
.test:nth-child(1),
.test:nth-child(2),
.test:nth-child(3) {
color: #0F0
}
<div class="test">
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<div class="reuinIt">
<p>Test</p>
</div>
You are confused between the usage of nth-child & nth-of-type. nth-child will consider all the tags and all the elements. If you want to specifically count a certain type of element or class, don't make use of nth-child. Go for nth-of-type. But, moreover nth-of-type is not supported currently for the classes though it works fine for html tags (may be in future it will get supported). All you need to do is change the nth-child numbers to 1, 3, 4. That's the only way you can get your results.
Fiddle: https://jsfiddle.net/jw66uj1p/
.test:nth-of-type(1),
.test:nth-of-type(3),
.test:nth-of-type(4) {
color: #0F0
}
I asked a similar question earlier but I found a better way to word it. So, given an html document that has multiple div ids, and each div id with several p tags inside it..like,
<div id="testing">
<h2>Hello</h2>
<p>this is number one</p>
<p> this is number two </p>
</div>
<div id="testingTwo">
<h2>hello again! </h2>
<p> i just want this one </p>
How would I specifically target the second p tag of the id 'testing' without affected the first p tag of the second id 'testingTwo'?
You can use nth-of-type selector to select second p element.
By using #testing in the selector, you're only targeting the elements that are inside of the #testing element. So, you don't have to worry about the p elements elsewhere.
#testing p:nth-of-type(2) {
color: green;
font-weight: bold;
}
<div id="testing">
<h2>Hello</h2>
<p>this is number one</p>
<p>this is number two</p>
</div>
<div id="testingTwo">
<h2>hello again! </h2>
<p>i just want this one</p>
As an alternative, you can also use #testing :nth-child(3) to select third child element inside #testing element. However, this is not a reliable method since the markup may change and this will not work.
#testing :nth-child(3) {
color: red;
}
<div id="testing">
<h2>Hello</h2>
<p>this is number one</p>
<p>this is number two</p>
</div>
<div id="testingTwo">
<h2>hello again! </h2>
<p>i just want this one</p>
Try
#testing :nth-child(3) {
//code
}
Use '#' if targeting an ID, and '.' if a class.
For perhaps the simplest method, you could give the P tag you want a new ID or class to set it apart.
<div id="testing">
<h2>Hello</h2>
<p>this is number one</p>
<p id="mytarget"> this is number two </p>
</div>
Then target that ID.
You can use nth-of-type(n) css property.Here n is int value starts from 1...n.
Solution for your problem:
#testing p:nth-of-type(1) {
font-size:18px;
}
Codepen demo : Demo
Refer MDN Documentation for more information
You can target specific p-tags by calling the div id and the nth child inside the p tag you want to alter, for example
#testing :nth-child(3) {
color: red;
}
would call the third p-tag inside the testing.
I have this HTML Code:
<div id="loggedin">
</div>
<div id="notloggedin">
</div>
<div>
</div>
I want two identify the last div which is not "loggedin" and "notloggedin". How will I do that through css?
This uses CSS3's :not() selector. It will work for all DIV that do not have an id attribute present.
div:not([id]){
color:green;
}
<div id="loggedin">
text
</div>
<div id="notLoggedIn">
text
</div>
<div>
this should come out green
</div>
Another Example that came up as a result of comments
Since we are unaware of what your HTML looks like, this may be a bit better suited for your needs.
.container > div:not([id]) {
color: green;
}
<div class="container">
<div id="loggedin">
Logged In
</div>
<div id="notloggedin">
Logged Out
</div>
<div>
This text should be green
</div>
</div>
<div>
this text should not be green because it isn't a child of the container div.
</div>
You can target the last div with CSS using three ways.
First way:
div:last-child {
//styles come here
}
Second way:
div:nth-child(3) {
//styles come here
}
Third way:
div:not([id]){
//styles come here
}
There might be other ways as well using psuedo-selectors.
Try to be a bit more clear in your question, to revise my answer, if you want to refer to the 3rd div (that's not what you asked at all). then as the others said, you need to wrap the three div's in a parent-div and refer to it using either nth-child, or [not]. You also asked this same question (worded differently) like 2 minutes before asking this one.
nth-child
div:nth-child(3) {
}
not
div:not([id]){
}
PS. I don't see any reason why you can't give the last div an id or class anyways.
use :last-child in your css for the div tag.
HTML:
CSS:
div:last-child
{
//your styles for last div here.
}