Css select first child inside another childs - css

I am trying to select the first child inside some other elements.
This is the example.
<div class="parent">
<div class="feature">
<div class="some"></div>
</div>
<div class="feature">
<div class="some"></div>
</div>
<div class="feature">
<div class="required">I NEED TO SELECT THIS</div>
</div>
<div class="feature">
<div class="required">NOT THIS</div>
</div>
</div>
I want to select first occurrence of required. And also there can be arbitrary numbers div with .feature ( with .some) before i get to div which contains .required .
Can this be done ?
What i tried. (not working)
.parent .required:first-child {}
.parent .required:first-of-type {}


.parent .feature .required:first-child {
color: red;
}
<div class="parent">
<div class="feature">
<div class="some"></div>
</div>
<div class="feature">
<div class="some"></div>
</div>
<div class="feature">
<div class="required">I NEED TO SELECT THIS</div>
</div>
<div class="feature">
<div class="required">NOT THIS</div>
</div>
</div>


You need to add a separate class for this. .parent .feature .required:first-child will work for the first childs of required class. In your code <div class="required">I NEED TO SELECT THIS</div> and <div class="required">NOT THIS</div> both are first childs of .parent class.
So if you have at least two child of class then following works.
.parent .feature .required:first-child {
color:red;
}
<body>
<div class="parent">
<div class="feature">
<div class="some"></div>
</div>
<div class="feature">
<div class="some"></div>
</div>
<div class="feature">
<div class="required">I NEED TO SELECT THIS (First child)</div>
<div class="required">NOT THIS(second child)</div>
</div>
<div class="feature">
<div class="required">NOT THIS (This is also first child)</div>
</div>
</div>
</body>
Hope you will understand the problem.

Related

How do I select every instance of a class on a page, but not the first instance - regardless of parent?

I want to set every div with the class="wp-block-column" to 'display:none;' --> but not the first one.
I am having trouble :not selecting the first div with the class="wp-block-column"
BOTTOM LINE: I want to select all divs with the class="wp-block-column" throughout the page regardless of where they land or who their parent is --> but not the first instance. I want to select instances from the body, not a parent div.
<div class="menu-column"> only appears inside <div class="seventy-thirty-block"> but there could be 1 or 5 of these blocks, they are generated from a loop.
There could also be any number of blocks that are not <div class="seventy-thirty-block">before.
The css on this page works because :not(:nth-child(2) gets the second child of <div class="singleBlogContent">
But if I uncomment
<!--
<div class="callout-full-block">
</div>
-->
then it no longer works because now it's :not(:nth-child(3)
Here is the JS Bin:
https://jsbin.com/xowefaj/edit?html,css,output
The output that I want in the JS Bin is:
content
menu
content
content
This is my html:
<div class="singleBlogContent">
<div class="callout-full-block">
</div>
<!-- <div class="callout-full-block">
</div> -->
<div class="seventy-thirty-block">
<div class="container">
<div class="seventy-thirty-columns">
<div>
<div>
content
</div>
</div>
<div class="wp-block-column">
<div class="menu-column">
menu
</div>
</div>
</div>
</div>
</div>
<div class="seventy-thirty-block">
<div class="container">
<div class="seventy-thirty-columns">
<div>
<div>
content
</div>
</div>
<div class="wp-block-column">
<div class="menu-column">
menu
</div>
</div>
</div>
</div>
</div>
<div class="seventy-thirty-block">
<div class="container">
<div class="seventy-thirty-columns">
<div>
<div>
content
</div>
</div>
<div class="wp-block-column">
<div class="menu-column">
menu
</div>
</div>
</div>
</div>
</div>
</div>
This is my css:
div.seventy-thirty-block:not(:nth-child(2)) .wp-block-column .menu-column {
display:none;
}

Assign the first one a unique class then assign it display: block; after the initial ruleset for display: none. If you want a dynamic solution, you should use JavaScript. See Figure I
Figure I
document.querySelectorAll('.wp')[0].classList.add('.first');
.wp {
display: none;
}
.first {
display: block
}
<main>
<div class='wp first'>First</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
</main>

CSS grid inside another CSS grid displaying like parent grid

I am trying to create a css grid inside another css grid look like it's parent grid. The size of the inner grid is smaller by 20 and 100 pixels but it won't align like the parent grid. Please check out the codepen. Thank you.
CODEPEN: https://codepen.io/centem/pen/oNvZLgP?editors=1100
<div class="grid-page">
<div class="header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="menu">MENU</div>
<div class="content">
<div class="inner-grid">
<div class="inner-header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="inner-menu">MENU</div>
<div class="inner-content">
CONTENT
</div>
<div class="inner-footer">FOOTER</div>
</div>
</div>
<div class="footer">FOOTER</div>
</div>

Replace the class inner-grid with the inner-grid-page. No CSS is defined for inner-grid class but I can see grids defined for inner-grid-page. Let me know if it works
<div class="grid-page">
<div class="header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="menu">MENU</div>
<div class="content">
<div class="inner-grid-page">
<div class="inner-header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="inner-menu">MENU</div>
<div class="inner-content">
CONTENT
</div>
<div class="inner-footer">FOOTER</div>
</div>
</div>
<div class="footer">FOOTER</div>
</div>

How can I select a range of elements following a specific (.selected) element that has a different parent element?

As you can see, there are .row elements that are parent to .cell elements.
I have a selected element inside a .row element, I want to target:
An element that is a child of the parent element that follows the parent containing .selected
Is this possible in CSS only?
Assume I want to select the second .cell of the parent next to the parent containing .selected
How do I turn the background color of the div containing the number 13 green?
.row .cell.selected {
background-color: red
}
.row .cell.selected+.cell+.cell {
background-color: red;
}
.row .cell.selected+.cell+.cell+.cell {
background-color: red;
}
.row .cell.selected+.cell+.cell+.cell+.cell+.cell {
background-color: red;
}
#month-view .row .cell.selected+.cell {
background-color: yellow;
}
.row {
padding: 50px;
}
<div id="month-view">
<div class="row">
<div class="cell">
<div class="day"> <span>5</span></div>
</div>
<div class="cell selected">
<div class="day"><span>6</span></div>
</div>
<div class="cell">
<div class="day"><span>7</span></div>
</div>
<div class="cell">
<div class="day"><span>8</span></div>
</div>
<div class="cell">
<div class="day"><span>9</span></div>
</div>
<div class="cell">
<div class="day"><span>10</span></div>
</div>
<div class="cell">
<div class="day"><span>11</span></div>
</div>
</div>
<div class="row">
<div class="cell ">
<div class="day"><span>12</span></div>
</div>
<div class="cell">
<div class="day"><span>13</span></div>
</div>
<div class="cell">
<div class="day"><span>14</span></div>
</div>
<div class="cell">
<div class="day"><span>15</span></div>
</div>
<div class="cell">
<div class="day"><span>16</span></div>
</div>
<div class="cell">
<div class="day"><span>17</span></div>
</div>
<div class="cell">
<div class="day"><span>18</span></div>
</div>
</div>
/div>

If I understood your question you want that the cell that gets a ".selected" class in the first row gets a styling in a cell in the same position in the second row.
That is not possible with CSS only, just using JS. CSS can't give you the index position of your ".selected" cell.
If you want a solution that is pure HTML and CSS I recommend you to add a second class like ".selected-column" to the next rows and style after this.

Not possible in CSS as you can't go backwards/up the DOM in CSS. But in case you can use JS or jQuery, here's a way. It's pretty easy and intuitive with jQuery using $.parent(), $.next(), and :nth-child.
$('.selected').parent('.row').next('.row').find('.cell:nth-child(2)').addClass('green');
.row .cell.selected {
background-color: red
}
.row {
padding: 50px;
}
.green {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="month-view">
<div class="row">
<div class="cell">
<div class="day"> <span>5</span></div>
</div>
<div class="cell selected">
<div class="day"><span>6</span></div>
</div>
<div class="cell">
<div class="day"><span>7</span></div>
</div>
<div class="cell">
<div class="day"><span>8</span></div>
</div>
<div class="cell">
<div class="day"><span>9</span></div>
</div>
<div class="cell">
<div class="day"><span>10</span></div>
</div>
<div class="cell">
<div class="day"><span>11</span></div>
</div>
</div>
<div class="row">
<div class="cell ">
<div class="day"><span>12</span></div>
</div>
<div class="cell">
<div class="day"><span>13</span></div>
</div>
<div class="cell">
<div class="day"><span>14</span></div>
</div>
<div class="cell">
<div class="day"><span>15</span></div>
</div>
<div class="cell">
<div class="day"><span>16</span></div>
</div>
<div class="cell">
<div class="day"><span>17</span></div>
</div>
<div class="cell">
<div class="day"><span>18</span></div>
</div>
</div>
</div>

Why does nth-of-type() and nth-child() break with unrelated element

I am obviously missing something really fundamental but I have the following html
<div class="test-cont">
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
</div>
and am using the following selectors
.test-cont .row:nth-of-type(odd) {
background: purple;
}
.test-cont .row:nth-of-type(even) {
background: red;
}
Which I believe expresses 'select the nth child items of .text-cont where class contains .row and is either odd or even'.
Yet the <div class="md-margin"></div> break these selectors.
So I end up with
Instead of the alternating pattern I expect. The problem is resolved when I remove the md-margin divs. What am I missing?

it is because you have those md-margin divs in between, making them the even ones.
(althought :nth-of-type will show the result you want when using classes - depending on the markup -, but it refers to the element type, that's why div with md-margin are "counting" here.
snippet with md-margin
.test-cont .row:nth-of-type(4n+2) {
background: purple;
}
.test-cont .row:nth-of-type(4n+4) {
background: red;
}
<div class="test-cont">
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
</div>
Snippet without md-margin
.test-cont .row:nth-of-type(odd) {
background: purple;
}
.test-cont .row:nth-of-type(even) {
background: red;
}
<div class="test-cont">
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
</div>

How to select the element in a tree structure?

HTML:
<div class="item">
首页
<div class="item">
项目
<div class="item">
招贤
<div class="item">
联系
</div>
</div>
</div>
</div>
SCSS:
.item{
background-color:skyblue;
#for $i from 1 through 4{
&:nth-child(#{$i}){
margin-left:$i * 10px;
}
}
}
The nth-child(3) doesn't select that.
I try to use nth-of-type, but it's only take nth-of-type(1).
Do I need to add a class in every .item ?

The correct way is to use the space since you are talking about children and not siblings
div div div {}
div div div{
background: red
}
<div class="item">
首页
<div class="item">
项目
<div class="item">
招贤
<div class="item">
联系
</div>
</div>
</div>
</div>
To use nth-child you will have to change the markup structure
div:nth-child(3){
background: red
}
<div class="item">
首页
</div>
<div class="item">
项目
</div>
<div class="item">
招贤
</div>
<div class="item">
联系
</div>

Resources