I have the following html
<div class="parentt">
<p>p 1</p>
<p>p 2</p>
<p>p 3</p>
</div>
so if i want to style the second p inside my parentt class i will do
.parentt > p:nth-child(2) {
border: 1px solid red;
}
but when my html is mixed
<div class="parentt">
<p>p 1</p>
<h2>sdsd</h2>
<p>p 2</p>
<p>p 3</p>
</div>
and i put inside h2 tag, my css is not working any more because now nth-child 2 is not paragraph but it is h2.
How can i dynamically first select all p inside and after that to select the second p inside?
Because sometimes the second p inside the parrent can appear on nth-child number 8 for example.
I can't change every time my css.
In such cases you could use nth-of-type instead of nth-child
.parentt > p:nth-of-type(2) {
border: 1px solid red;
}
<div class="parentt">
<p>p 1</p>
<h2>sdsd</h2>
<p>p 2</p>
<p>p 3</p>
</div>
Use nth-of-type
.parentt > p:nth-of-type(2) {
border: 1px solid red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
You can use :nth-of-type() pseudo selector. You can read more here
.parentt p:nth-of-type(2) {
border:1px solid red;
}
<div class="parentt">
<p>p 1</p>
<h2>sdsd</h2>
<p>p 2</p>
<p>p 3</p>
</div>
Related
One of our homework assignments for the week is putting various selectors into the same file. The textbook we we're given was no help at all and I can't figure out what's going wrong here. The first and fourth work but the two in the middle don't. I screwed something up as it was working when we did it in class, I just don't know what.
CSS file (everything in here is random just to have it filled in. It wasn't important for the assignment)
div.one > p{
background-color: rgb(154, 212, 212);
border: 2em;
border-style: dashed;
font-size: 10px;
text-align: center;
}
div.two + p{
background-color: rgb(18, 111, 114);
border: 10px;
border-style: dotted;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: larger;
}
div.three ~ p{
background-color: hsl(59%, 80%, 22%);
font-size: 15px;
border: 6px;
border-style: solid;
}
div.four{
border-style: groove;
border-color: chartreuse;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 400;
background-color: rgb(188, 164, 211);
text-align: center;
}
HTML file
<body>
<div class="one">
<h4>Section One</h4>
<p>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph 3</p>
<p>Paragraph Four</p>
<p>Paragraph number 5</p>
<p>Paragraph 6</p>
</div>
<div class="two">
<div>
<h4>Section 2</h4>
<p>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph 3</p>
<p>Paragraph Four</p>
<p>Paragraph number 5</p>
<p>Paragraph 6</p>
</div>
</div>
<div class="three">
<div>
<h4>Section 3</h4>
<p>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph 3</p>
<p>Paragraph Four</p>
<p>Paragraph number 5</p>
<p>Paragraph 6</p>
</div>
</div>
<div class="four">
<h4>Section 4</h4>
<p>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph 3</p>
<p>Paragraph Four</p>
<p>Paragraph number 5</p>
<p>Paragraph 6</p>
</div>
</body>
Everything is right! You understood wrongly!
The table:
Selector
Example
Description
element
p
Selects all <p> elements
element.class
p.intro
Selects all <p> elements with class="intro"
element,element
div, p
Selects all <div> elements and all <p> elements
element element
div p
Selects all <p> elements inside <div> elements
element>element
div > p
Selects all <p> elements where the parent is a <div> element
element+element
div + p
Selects the first <p> element that is placed immediately after <div> elements
element1~element2
p ~ ul
Selects every <ul> element that is preceded by a <p> element
Reference
According to the table you can use
div.one ,to Selects all div elements with class="one"
div.one,p ,to Selects all div elements with class="one" and all p elements
div.one p ,to Selects all p elements ,inside div elements with class="one"
div.one>p ,to Selects all p elements where parent is div elements with class="one"
div.one + p ,to Selects p elements that is placed immediately after div elements with class="one"
div.one ~ p ,to Selects all p elements that is placed after div elements with class="one"
the last two points here make the second and third not working
div.one>p/*Edit here and test*/
{
background-color: rgb(154, 212, 212);
border: 2em;
border-style: dashed;
font-size: 10px;
text-align: center;
}
<div class="one">
<h4>Section One</h4>
<p>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph 3</p>
<p>Paragraph Four</p>
<p>Paragraph number 5</p>
<p>Paragraph 6</p>
</div>
Note: i have removed all other div for easy use!,just edit the one code in css
bookmark this for future!
i have the following HTML
<div class="parentt">
<h2>sdsd</h2>
<p>p 1</p>
<p>p 2</p>
<p>p 3</p>
</div>
so if i want to style all paragraphs inside i will do
.parentt p:nth-of-type {
border:1px solid red;
}
but if i have nested paragraphs for example
<div class="parentt">
<h2>sdsd</h2>
<p>p 1</p>
<p>p 2</p>
<p>p 3</p>
<div class="my-div-with-nested-p">
<p>nested p 1</p>
<div> <p>nested p 2</p></div>
</div>
</div>
then my css code does not work.How can i style the nested paragraphs - nested p 1 and nested p 2 automatically throught the parent like in the first case ?
You can use Descendant selectors to select a nested child.
.parentt * p, .parentt > p{
color: red;
}
<div class="parentt">
<h2>sdsd</h2>
<p>p 1</p>
<p>p 2</p>
<p>p 3</p>
<div class="my-div-with-nested-p">
<p>nested p 1</p>
<div> <p>nested p 2</p></div>
</div>
</div>
Official Specification: 5.5 Descendant selectors
OR
You can directly apply properties to all <p> inside .parentt div.
.parentt p{
color:red;
}
<div class="parentt">
<h2>sdsd</h2>
<p>p 1</p>
<p>p 2</p>
<p>p 3</p>
<div class="my-div-with-nested-p">
<p>nested p 1</p>
<div> <p>nested p 2</p></div>
</div>
</div>
Is it possible to address the first element in a div when you don't know what the first element is.
I have for example two different divs
<div class="templateOne">
<h1>Header 1</h1>
</div>
<div class="templateOne">
<h2>Header 2</h2>
</div>
That I can then say
.templateOne > * {
margin-top: 0em;
}
or something like that.
If you want to use adress the first child element, you can use the :first-child or the :nth-child(1) pseudo-selector.
.templateOne :first-child {
color: red;
}
<div class="templateOne">
<h1>Header 1</h1>
<p>Content 1</p>
</div>
<div class="templateOne">
<h2>Header 2</h2>
<p>Content 2</p>
</div>
If you want to address only the first element with a specific class name you can use :first-of-type or nth-of-type(1):
.templateOne:first-of-type {
color: red;
}
<div class="templateOne">
<h1>Header 1</h1>
<p>Content 1</p>
</div>
<div class="templateOne">
<h2>Header 2</h2>
<p>Content 2</p>
</div>
> child combinator
* universal selector
:first-child
.templateOne > *:first-child {
margin-top: 0em;
}
This question already has answers here:
Can the :not() pseudo-class have multiple arguments?
(5 answers)
Closed 1 year ago.
For eg.
I don't want that the CSS property should not be applied on the h4 tag
.abc {
color: red;
}
<div class="abc">
<h4>Hello 1</h4>
<p>Hello 2</p>
<p>Hello 3</p>
</div>
Try the :not pseudo-class
.abc :not(h4) {
color: red;
}
<div class="abc">
<h4>Hello 1</h4>
<p>Hello 2</p>
<p>Hello 3</p>
</div>
This question already has answers here:
Make the first character Uppercase in CSS
(8 answers)
Capitalize first letter of sentences CSS
(4 answers)
Closed 5 years ago.
<div class="ex1">
<div>
<p></p>
<p>Exmaple 1</p>
<p>Exmaple 2</p>
</div>
</div>
i can't select first character in "Exmaple 1" with css and i finding solution
Thanks for support
If you are talking about styling the first letter, then use :first-letter pseudo-element
.ex1 p:first-letter{
color:red;
font-size:2em;
}
<div class="ex1">
<div>
<p>Example 1</p>
<p>Example 2</p>
</div>
</div>
If you want to only apply it in the first p then also use :first-of-type
.ex1 p:first-of-type:first-letter{
color:red;
font-size:2em;
}
<div class="ex1">
<div>
<p>Example 1</p>
<p>Example 2</p>
</div>
</div>
Finally, if you just want to target the second element then use :nth-child(2) or the second p then :nth-of-type(2)
.ex1 p:nth-child(2):first-letter{
color:red;
}
.ex1 p:nth-of-type(2):first-letter{
font-size:2em;
}
<div class="ex1">
<div>
<p></p>
<p>Example 1</p>
<p>Example 2</p>
</div>
</div>