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>
Related
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>
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;
}
I have this code, how can I get only all the p under each h3 and put them to 3 lists, using Html Dom?
<h3>text</h3>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<h3>text</h3>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<h3>text</h3>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
What I mean is all the p below first h3 (above second h3) put into one list, the p below second h3 (above third h3) put into one list, the p below third h3 put into one list
You mean this?
const texts = [...document.querySelectorAll("p")].reduce((acc, p) => {
let tag = p.previousElementSibling;
let currentHeader = tag.tagName === "H3" ? tag.textContent : Object.keys(acc).pop();
acc[currentHeader] = acc[currentHeader] || [];
acc[currentHeader].push(p.textContent);
return acc;
}, {})
document.body.innerHTML += Object.keys(texts).map(header => `${header}:<ul>${texts[header].map(text=> `<li>${text}</li>`).join("")}</ul>`).join("")
<h3>Header 1</h3>
<p>text 1</p>
<p>text 2</p>
<p>text 3</p>
<h3>Header 2</h3>
<p>text 4</p>
<p>text 5</p>
<p>text 6</p>
<h3>Header 3</h3>
<p>text 7</p>
<p>text 8</p>
<p>text 9</p>
i have this code that i have to work on:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced CSS - Assignment 1</title>
<style>
</style>
</head>
<body>
<h1>Main Heading</h1>
<p>Paragraph 1</p>
Google
Google Doodles
Goto Link Group
<div id="first-div">
<h2>Subheading</h2>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div id="second-div">
<h3>Sub subheading</h3>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
<p>Paragraph 7</p>
<p>Paragraph 8</p>
</div>
</div>
<p>Paragraph 9</p>
<p>Paragraph 10</p>
</body>
</html>
How can i change the first 2 links (google links) color green and the third one red without changing the code? i have to use the selectors and pseudo classes. Can anyone tell me how to to that?
You can use :nth-of-type().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced CSS - Assignment 1</title>
<style>
a:nth-of-type(1),
a:nth-of-type(2) {
color: red;
}
a:nth-of-type(3) {
color: green;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<p>Paragraph 1</p>
Google
Google Doodles
Goto Link Group
<div id="first-div">
<h2>Subheading</h2>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div id="second-div">
<h3>Sub subheading</h3>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
<p>Paragraph 7</p>
<p>Paragraph 8</p>
</div>
</div>
<p>Paragraph 9</p>
<p>Paragraph 10</p>
</body>
</html>
Codepen: https://codepen.io/manaskhandelwal1/pen/Yzpprjw
a:nth-child(any number here)
a:nth-child(1), a:nth-child(2){
color: green;
}
a:nth-child(3){
color: red;
}
Google
Google Doodles
Goto Link Group
You can use attribute selectors:
/* This will match both google links because they both start with "https://www.google.com/" */
a[href^="https://www.google.com/"]{
color: green;
}
/* This will exactly match "https://www.link-group.eu/" */
a[href="https://www.link-group.eu/"] {
color: red;
}
<h1>Main Heading</h1>
<p>Paragraph 1</p>
Google
Google Doodles
Goto Link Group
<div id="first-div">
<h2>Subheading</h2>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div id="second-div">
<h3>Sub subheading</h3>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
<p>Paragraph 7</p>
<p>Paragraph 8</p>
</div>
</div>
<p>Paragraph 9</p>
<p>Paragraph 10</p>
I have a HTML that is messed and i can not change it, it looks like this:
<div>
<h2>This is a title cat</h2>
<p>This is a message</p>
<p>One cat</p>
<p>Two cat</p>
<p>Three cat</p>
<h2>This is a title dog</h2>
<p>Dog 0</p>
<p>Dog 1</p>
<p>Dog 2</p>
<p>Dog 3</p>
</div>
Now i would like to make every odd p that comes after a h2 element bolder.
So i would like this to be in bold:
This is a message
Two cat
Dog 0
Dog 2
How to write a selector in CSS (no jQuery, no JS available) to make those texts bold?
You can do this by using the css ~ selector, followed by the nth-of-type (alternatively nth-child) selector. You can read more about it these selectors on the MDN: General Sibling Selector and :nth-of-type.
And here's how to achieve what you wanted. Essentially, you're selecting all odd <p> elements that are siblings (i.e that come after) an <h2> tag.
h2 ~ p:nth-of-type(odd) {
font-weight: 600;
}
<div>
<h2>This is a title cat</h2>
<p>This is a message</p>
<p>One cat</p>
<p>Two cat</p>
<p>Three cat</p>
<h2>This is a title dog</h2>
<p>Dog 0</p>
<p>Dog 1</p>
<p>Dog 2</p>
<p>Dog 3</p>
</div>
h2 ~ p:nth-of-type(2n+1){
font-weight: 600;
}