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;
}
Related
I am currently preparing myself for a regional championship in web development for high-school students. Preparation tasks are one the championships website to solve. I have the following HTML code:
<h2>Task 5</h2>
<article id="task-5">
<div class="marble"></div>
<div class="marble"></div>
<section>
<div class="marble" data-target></div>
<div class="marble" data-target></div>
<section>
<div class="marble"></div>
<div class="marble"></div>
</section>
</section>
</article>
My goal is to select the divs with the marble class marked with data-target, but under following requirements:
I am not allowed to use these CSS pseudo-classes or CSS selectors:
:nth-child
:nth-last-child
:nth-of-type
:nth-last-of-type
[data-target]
nor any use of + or ~
Only one selector is allowed.
I have tried the following selector, but it still selects the third div (the one not marked with data-target):
#task-5 section > div:not(:last-child):not(:is(:first-child:is(:last-child)))
Can you please help me. Thank you very much
First you can select the section that has another section as a descendant. Then you can select the divs that are not descendants of a section which is the descendant of a section.
section:has(section) div:not(section section div) {
width: 100px;
height: 100px;
background: red;
}
<h2>Task 5</h2>
<article id="task-5">
<div class="marble">1</div>
<div class="marble">2</div>
<section>
<div class="marble" data-target>3</div>
<div class="marble" data-target>4</div>
<section>
<div class="marble">5</div>
<div class="marble">6</div>
</section>
</section>
</article>
Note: currently :has is supported on Firefox only if a flag is set.
The simplest answer, so far as I can tell from your posted constraints, would be:
/* this uses the child combinator (`>`) to select
the <div> elements which are the children of
a <section> which is in turn a child of an
<article>: */
article > section > div {
background-color: lime;
}
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
section {
margin-inline-start: 10%;
padding: 0.5em;
}
div {
border: 1px solid #000;
margin-inline-start: 10%;
min-block-size: 2em;
}
article>section>div {
background-color: lime;
}
<h2>Task 5</h2>
<article id="task-5">
<div class="marble"></div>
<div class="marble"></div>
<section>
<div class="marble" data-target></div>
<div class="marble" data-target></div>
<section>
<div class="marble"></div>
<div class="marble"></div>
</section>
</section>
</article>
References:
Child combinator: >.
You can select the first child through:
element:first-child
and you can select last child:
element :last-child
and you have some method like:
not()
first-of-type
last-of-type
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>
How can I select the first of the highest h* elements present in a DOM?
Something like
(h1, h2, h3, h4, h5, h6):first-of-ordered-set
I.e. if a DOM tree has, in this order, h2, h3, h1, h2, h1, it would select the first h1;
and if the DOM has h3, h3, h2, h2, h4, it would select the first h2.
Let's assume h* elements are not nested.
I suspect CSS doesn't have that power, right?
Somethink potentially usable: https://css-tricks.com/extremely-handy-nth-child-recipes-sass-mixins/
Edit: Why I want it: A CMS system takes this "first top heading" as a title of the document (post, page, ...). But it leaves it in the page. And then it shows the title twice - once as the post title and once in the body. JavaScript is removed. The top h* level may differ.
I found something. CSS can't do it. Yet.
W3C is drafting new features:
.post-content:has(h1, h2, h3, h4, h5, h6)
Together with :not(), this will allow what I need:
.post-content:has(h1) h1:first-of-kind,
.post-content:not(:has(h1)) h2:first-of-kind,
.post-content:not(:has(h1,h2)) h3:first-of-kind,
...
There's a catch - the :not() currently can only have a single "simple selector". If it supported more, then it would be achievable even without :has.
Greetings to the future readers, I hope it worked out.
For now, I am leaving this open, maybe someone will figure out with CSS 3.1.
The main issue is that we don't have previous selector in CSS. For example, we can get the first h2 but if later we find a h1 we cannot have a selector to go backwards.
Here is the best you can do with CSS. You can hide all the elements after the needed one (so the element you want is the last visible one) but you cannot do the same with the previous elements.
h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type {
color:red;
}
h1:first-of-type ~ * {
display:none;
}
h2:first-of-type ~ *:not(h1) {
display:none;
}
h3:first-of-type ~ h4 {
display:none;
}
.container {
border:1px solid;
}
<div class="container">
<h3>text 3</h3>
<h1>text 1*</h1>
<h2>text 2</h2>
<h1>text 1</h1>
</div>
<div class="container">
<h3>text 3</h3>
<h2>text 2*</h2>
<h2>text 2</h2>
<h4>text 1</h4>
</div>
<div class="container">
<h3>text 3</h3>
<h3>text 2</h3>
<h2>text 2*</h2>
<h4>text 1</h4>
</div>
<div class="container">
<h1>text 3*</h1>
<h3>text 2</h3>
<h2>text 2</h2>
<h4>text 1</h4>
</div>
You may then combine with a small JS code to keep only the needed element:
$('h3:first-of-type').prevAll('h4').hide();
$('h2:first-of-type').prevAll('*:not(h1)').hide();
$('h1:first-of-type').prevAll('*').hide();
h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type {
color:red;
}
h1:first-of-type ~ * {
display:none;
}
h2:first-of-type ~ *:not(h1) {
display:none;
}
h3:first-of-type ~ h4 {
display:none;
}
.container {
border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h3>text 3</h3>
<h1>text 1*</h1>
<h2>text 2</h2>
<h1>text 1</h1>
</div>
<div class="container">
<h3>text 3</h3>
<h2>text 2*</h2>
<h2>text 2</h2>
<h4>text 1</h4>
</div>
<div class="container">
<h3>text 3</h3>
<h3>text 2</h3>
<h2>text 2*</h2>
<h4>text 1</h4>
</div>
<div class="container">
<h1>text 1*</h1>
<h3>text 2</h3>
<h2>text 2</h2>
<h4>text 1</h4>
</div>
I used to make the element hidden but you can do the same with other styles:
$('h3:first-of-type').prevAll('h4').addClass('initial');
$('h2:first-of-type').prevAll('*:not(h1)').addClass('initial');
$('h1:first-of-type').prevAll('*').addClass('initial');
h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type {
color:red;
font-family:cursive;
font-style:italic;
}
h1:first-of-type ~ *,
h2:first-of-type ~ *:not(h1),
h3:first-of-type ~ h4,
h1.initial,h2.initial,h3.initial,h4.initial{
color:initial;
font-family:initial;
font-style:initial;
}
.container {
border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h3>text 3</h3>
<h1>text 1*</h1>
<h2>text 2</h2>
<h1>text 1</h1>
</div>
<div class="container">
<h3>text 3</h3>
<h2>text 2*</h2>
<h2>text 2</h2>
<h4>text 1</h4>
</div>
<div class="container">
<h3>text 3</h3>
<h3>text 2</h3>
<h2>text 2*</h2>
<h4>text 1</h4>
</div>
<div class="container">
<h1>text 1*</h1>
<h3>text 2</h3>
<h2>text 2</h2>
<h4>text 1</h4>
</div>
I'm trying to target the class, .textbox-fill to change the background colour and text colour for each individual box element. For example .textbox-fill's first-child should be grey. The second-child should be white. The third child I want to adjust the height slight and so on.
I have tried using the nth-child selector #About-Container .about-inner-content article:nth-child(1n+2) .textbox-fill nothing seems to work. Example here
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
I have encounter this issue in the past and I'm not 100% sure how I resolved it. I have read several articles and posts on this subject. I understand the basics, however something more complex like this I always approached with trial and error method.
Does anyone know how I can solve this issue?
Since your .textbox-fill is inside the article, it is the article you need to start with, as target the text-fill using nth-child will not work as it can't see outside its parent
So do like this instead
article:nth-child(1) .textbox-fill {
color: red;
}
article:nth-child(2) .textbox-fill {
color: lime;
}
article:nth-child(3) .textbox-fill {
color: blue;
}
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
If we talk about the .textbox-fill's .about-textbox's children, the h2 and p, do like this, where you use the global selector * in *:nth-child, as the children is of different types
.textbox-fill .about-textbox *:nth-child(1) {
color: red;
}
.textbox-fill .about-textbox *:nth-child(2) {
color: lime;
}
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
If you have a .textbox-fill with several children, like:
div.textbox-fill
h1#header
div#firstDiv
div#secondDiv
article#someArticle
div#thirdDiv
Now, .textbox-fill div:first-child will target nothing, because there isn't any div that is a first child of it's parent (.textbox-fill). Although .textbox-fill div:first-of-type will target div#firstDiv. .textbox-fill div:nth-child(2) will also target div#firstDiv. div#thirdDiv will be .textbox-fill div:nth-of-type(3) or .textbox-fill div:nth-child(5) or .textbox-fill div:last-child or .textbox-fill div:last-of-type.
If you want to target specific .textbox-fill located on site, but with different parents, like:
div.something
div.textbox-fill
[...]
article#other
div.textbox-fill
You cannot target it using nth-child nor nth-of-type. You will need to find another way based on your site tree.
I need to know how to display text in columns inside a horizontal scrolling box.
Basically I have a 600x300 box, and each bit of information is given inside a column, like;
Column 1... Column 2 .... Column 3
Para 1..... Para 2 ...... Para 3
Without the dots.
The thing then has to be contained within a horizontal box.
So how is this done?
I used something like the following to create the columns:
<style>
.column {
width:200px;
float:left
}
</style>
<div class="column">
<h2>header text</h2>
<p>paragraph text What if this is longer</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
But I cant' figure out how to contain this all within a box that can scroll horizontally
Add overflow-x: scroll to your CSS definition.
Put it in a container that has white-space:nowrap and make the columns display:inline-block
.column-container{
white-space:nowrap;
}
.column {
width: 200px;
display:inline-block;
vertical-align:top;
white-space:normal;
}
<div class="column-container">
<div class="column">
<h2>header text</h2>
<p>paragraph text What if this is longer</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
</div>