Say I had: the following code. How could I select only the third div and style the 2 paragraphs inside assuming there are no classes or id's?
<div>
<h1></h1>
<p></p>
</div>
<div>
<h2></h2>
<input>
<div>
<p></p>
<input>
</div>
<div>
<h4></h4>
</div>
you can try to type in the CSS file for instance:
div:last-of-type
also if you need to target the second div you can get it by:
div:nth-of-type() in between the parances you can type the number you want to target
For inheritable properties, you may just specify the number of the child of the <div> element. e.g. div:nth-child(3)
For non-inheritable properties, you need to have a higher level of specificity to target the <p> elements. e.g. div:nth-child(3) p
To check if the property is inheritable, you may check the list here.
/* for inheritable properties such as color*/
div:nth-child(3) {
color: red;
}
/* for non-inheritable properties such as border*/
div:nth-child(3) p {
border: thin solid skyblue;
}
<div>
<h1> First
</h1>
<p>
</p>
</div>
<div>
<h2> Second
</h2>
<input>
<div>
<p> Third
</p>
<input>
</div>
<div>
<h4> Fourth
</h4>
</div>
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 two sets of variables:
// first
#main: blue;
#secondary: pink;
// second
#main: orange;
#secondary: red;
and I have the following html:
<div>
<div class="foo">
<h1>FOO</h1>
<div>
<p>some text</p>
even a link
</div>
</div>
<div class="bar">
<h1>bar</h1>
<div>
<p>some text</p>
even a link
</div>
</div>
</div>
I want to assign the first set of vars only to .foo and all of its children.
I want to assign the second set of vars only to .bar and all of it's children.
So that I could do something like:
p {
color: #secondary
}
And the resulting <p> text would be colored pink if the <p> is a child (or nested indirectly) of .foo but red if it is the child (or nested indirectly) of .bar.
Is that possible?
To get the last p to have no margin, you could do last-of-type, however this doesn't work once you start having p nested within other divs.
Is it possible to have specific css for the last p within a specified class?
For example:
<div class="my-container">
<div class="banner-message1">
<p>1</p>
</div>
<div class="banner-message2">
<p>2</p>
</div>
</div>
To specifically make it so that the <p>2</p> has certain styling, but not the <p>1</p>
The css of div.my-container p:last-of-type would seemingly apply to both <p>1</p> and <p>2</p> since they are the last p within the parent div (in this instance banner-message1 and banner-message2)
https://jsfiddle.net/hygzq3ab/
Here's a jsfiddle, which has both a margin-bottom on the last p tag and then also padding of the container, so that the last p element looks essentially like it has a double bottom margin. last-of-type does not seem to work since it is contained within other div classes.
Example code for that would be div.my-container p:last-of-type { margin-bottom:0; }
If the <p> is always contained in a <div> then you could target that paragraph with
.my-container > div:last-of-type p {
margin-bottom: 0;
}
You need to target the paragraph inside the last div (also :last-child instead of :last-of-type would work as well in this specific example).
But if your last <p> is not always contained in a <div> then you could target it with
.my-container > div:last-child p,
.my-container > p:last-child {
margin-bottom: 0;
}
Here you must use :last-child instead of :last-of-type or — in case the last <p> is not wrapped in its own <div> — you will also target the paragraph contained in the last <div>
Is this what are you asking for?
html (your fiddle does have alot same ids of same element)
<div class="my-container">
<div class="banner-message">
<p>
1
</p>
</div>
<div class="banner-message">
<p>
2a
</p><p>
2b
</p>
</div>
<div class="banner-message">
<p>
aaa
</p>
</p>
<p>
3
</p>
</div>
</div>
and css:
.banner-message:last-child p:last-child {
color: red
}
Should do the trick
You also should use that: last:child
.my-container > div:last-child p {
margin-bottom: 0;
}
In the following simple document:
div+p {
color: red;
}
<div>
<p>Hi Caitlin! Welcome to CSS!</p>
</div>
The text between the 'p' (paragraph) tags is NOT displayed in red despite being the children of the div element. The '~' selector does not function either, but '>' performs as expected. I'm using Chrome 49 on a Windows machine.
+ is the adjacent sibling combinator.
The div and p have a parent/child relationship (> is the child combinator while a space is the descendant combinator) not a brother/sister relationship (which would be <div></div><p></p>).
div is the parent element while p is the child element
since the relationship between the elements is parent-child, you have to use '>' or ' '
but note that div > p will only select the immediate p child elements, it will not work on other p elements that are not an immediate child element of the div
That is
.parent > p{ color: red; }
only works like this
<div class="parent">
<p>this will be in red color</p>
<div>
<p>this will NOT be in red color</p>
</div>
<p>this will also be in red color</p>
<div>
<div>
<p>this will NOT be in red color</p>
</div>
</div>
</div>
but
.parent p{ color: red; }
works like this
<div class="parent">
<p>this will be in red color</p>
<div>
<p>this will also be in red color</p>
</div>
<p>this will also be in red color</p>
<div>
<div>
<p>this will also be in red color</p>
</div>
</div>
</div>
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.