CSS: Style Nth Sibling

CSS: style nth sibling

Sure you can. You use the general sibling selector (~) in combination with :hover.

.child:first-of-type:hover ~ .child:nth-of-type(4) {
  color: red;
}

<div class="parent">
    <div class="child"> 1 </div>
    <div class="child"> 2 </div>
    <div class="child"> 3 </div>
    <div class="child"> 4 </div>
    <div class="child"> 5 </div>
</div>

How to select nth sibling after specific class based on any number multiple with CSS?

The nth-of-class doesn't exists, and the nth-of-type will target them all, so, you'll need to wrap the .s2 in a div. You can then remove the classes and target them by using .s1+div>div

body {    background: gray;    color: blue;    position: relative;}* {    text-align: center;    vertical-align: middle;    margin: auto;}div {    height: 50px;    display: table;    margin: auto;    margin-bottom: 10px;}.s1+div {    display: block;}.s1 {    width: 100%;    clear: both;    background: lightgreen;}.s1+div>div {    width: 50%;}a, h2 {    display: table-cell;    height: 100%;}/*----------------------------------------------------*/
/*-------mistakes in float&color under second S1------*/
/*-------mistakes in float&color under third  S1------*/
/*----------------------------------------------------*/.s1+div>div:nth-child(odd) {    float: left;}.s1+div>div:nth-child(even) {    float: right;}.s1+div>div:nth-of-type(4n+1),.s1+div>div:nth-of-type(4n+4) {    background: white;}
.s1+div>div:nth-of-type(4n+2),.s1+div>div:nth-of-type(4n+3) {    background: black;}/*----------------------------------------------------*/

<div class="s1">    <h2>first S1</h2></div><div>    <div><a>S2-1a</a></div>    <div><a>S2-2a</a></div>    <div><a>S2-3a</a></div>    <div><a>S2-4a</a></div>    <div><a>S2-5a</a></div>    <div><a>S2-6a</a></div>    <div><a>S2-7a</a></div>    <div><a>S2-8a</a></div></div><div class="s1">    <h2>second S1</h2></div><div>    <div><a>S2-1b</a></div>    <div><a>S2-2b</a></div>    <div><a>S2-3b</a></div>    <div><a>S2-4b</a></div>    <div><a>S2-5b</a></div></div><div class="s1">    <h2>third S1</h2></div><div>    <div><a>S2-1c</a></div>    <div><a>S2-2c</a></div>    <div><a>S2-3c</a></div>    <div><a>S2-4c</a></div></div>

Select the nth following sibling

Such a pseudo-class would not work because you are expecting it to match elements relative to a different compound selector, which is not how simple selectors work. For example, if you wrote a complex selector that only had a single compound selector with that pseudo-class (and no sibling combinators):

.block:nth-sibling(4n)

Would you expect this to match .block:nth-child(4n), match nothing at all, or be invalid?

It'd be nice to be able to abridge + .block + .block + .block + .block and make it repeat somehow, but unfortunately due to how the selector syntax is designed, it's just not possible.

You'll have to use JavaScript and/or add extra classes to the appropriate elements instead.

CSS general sibling and nth-of-type selector - odd behavior?

nth-of-type() "matches elements of a given type, based on their position among a group of siblings". Your code is selecting the <div> that is preceded by input.two and is also the second <div> sibling in the parent element.

In your case, you might consider using the adjacent sibling combinator. Below, I'm selecting the <div> that immediately follows .one (red) and the <div> that immediately follows the <div> that immediately follows .two (blue).

.one + div {  background-color: red;}
.two + div + div {  background-color: blue;}

<form class="test">  <input class="one" value="one">  <div>A</div>  <input class="two" value="two">  <div>B</div>  <div>C</div></form>

CSS selectors (adjacent sibling and nth-child/nth-of-type)

Answer for first question

blockquote[title="quote"]+blockquote cite { color: red; }

Updated fiddle https://jsfiddle.net/fk5fxbm4/6/

Answer for second question

p:last-of-type em:last-of-type { color: red; }

Updated fiddle https://jsfiddle.net/zs58xbch/9/

Style every other div using nth-of-type selector with dividing divs

There is no point in using :nth-of-type() because all your elements are div.

Use :nth-child() with 4n+3 instead.

Selects every fourth element starting at the third.

.divider{  width: 100%;  border-bottom: 1px solid black;}.section{  width: 50%;  height: 10vh;  background-color: lightblue;}.section:nth-child(4n+3){  background-color: lightgreen;  margin-left: 50%;}

<div class="section"></div><div class="divider"></div><div class="section"></div><div class="divider"></div><div class="section"></div><div class="divider"></div><div class="section"></div>

nth-child css selector not working correctly if we had br tag in sibling of children elements

The queries work as expected. When you run .div1>span:nth-child(2) you are requesting for a span element that is the second child of its parent, in this case div1. Second child of div1 is a <br> and therefore you get null.

As suggested by Hao Wu, you should use :nth-of-type

document.querySelector(".div1>span:nth-of-type(2)")
This will search for the second span element that is a child of div1

console.log("i have 5 span children as well : ", document.querySelectorAll(".div1>span").length);

console.log("second span child is null : ", document.querySelector(".div1>span:nth-of-type(2)"));

console.log("third span child is second span element : ", document.querySelector(".div1>span:nth-of-type(3)").textContent);

console.log("select second element by another way: ", document.querySelectorAll(".div1>span")[1].textContent);

console.log("tag name of second child: ", document.querySelector(".div1>*:nth-child(2)").tagName);

html>body>div.div1>span:nth-of-type(2) {
  color: blue;
}

<html>

<body>
  <div class="div1">
    <span>this is example text 1</span>
    <br>
    <span>this is example text 2</span>
    <br>
    <span>this is example text 3</span>
    <br>
    <span>this is example text 4</span>
    <br>
    <span>this is example text 5</span>
    <br>
  </div>
</body>

</html>

---

Related Topics