Even div selection using css3

Hello Folks,

Below is my div structure, I would like to access all the even div’s(which have class name ‘inputresults’ need to apply styles for that. As simple odd and even div’s should be side by side, right now those are one after one.

Note: exclude the div with class ‘myClass’.

<div class="myDiv" id="testDiv">

    <div class="myClass">
        <p class="grayLetter">Test</p>
        <div class="sample"><select></select></div>
    </div>
    
    <div class="inputresults">
        <p class="grayLetter">First Name<span class="redLetter">*</span></p>
        <div class="margine5top"><input id="test-firstname" name="testAddress.firstName" class="required txtbox" type="text" value=""></div>
    </div>
    
    <div class="inputresults">
        <p class="grayLetter">First Name<span class="redLetter">*</span></p>
        <div class="margine5top"><input id="test-firstname" name="testAddress.lastname" class="required txtbox" type="text" value=""></div>
    </div>
    
    <div class="inputresults">
        <p class="grayLetter">First Name<span class="redLetter">*</span></p>
        <div class="margine5top"><input id="test-firstname" name="testAddress.code" class="required txtbox" type="text" value=""></div>
    </div>
    
    <div class="inputresults">
        <p class="grayLetter">First Name<span class="redLetter">*</span></p>
        <div class="margine5top"><input id="test-firstname" name="testAddress.town" class="required txtbox" type="text" value=""></div>
    </div>
    
    <div class="inputresults">
        <p class="grayLetter">First Name<span class="redLetter">*</span></p>
        <div class="margine5top"><input id="test-firstname" name="testAddress.zipcode" class="required txtbox" type="text" value=""></div>
    </div>
    
</div>

I have tried in below way is this correct:
.myDiv > div.inputresult:nth-child(even (or) 2n+2){float:right;}

All you should need is. Make sure you have a clear somewhere along the way as well…

.inputresults:nth-child(even) { float: right; }

(yours should have worked, you were just missing the s at the end of the class name)

Hi there koder,

try not to make coding so convoluted. :scream:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background: #f0f0f0;
    font: 1em /1.62em verdana,arial,helvetica, sans-serif;
 }
#testForm {
    display: inline-block;
    padding: 1em;
    border: 0.06em solid #999;
    background:#fff;
 }
#testForm label {
    float: left;
    padding: 1em;
    margin: 0.5em;:1em;
    border: 0.06em solid #999;
    color: #666;
 }
#testForm label:nth-child(even) {
    clear: both;
 }
#testForm span {
    margin-left: 0.5em;
    color: #f00;
 }
#testForm select,
#testForm input {
    display: block;
    margin: 0.5em 0;
    color: #666;
 }
</style>

</head>
<body> 

<form id="testForm">
 <label>Test<select></select></label>
 <label>First Name<span>*</span><input name="firstName"  type="text"></label>
 <label>First Name<span>*</span><input name="lastname" type="text"></label>
 <label>First Name<span>*</span><input name="code" type="text"></label>
 <label>First Name<span>*</span><input name="town" type="text"></label>
 <label>First Name<span>*</span><input name="zipcode" type="text"></label>   
</form>

</body>
</html>

coothead

2 Likes

Note that nth-child refers to the siblings structure and not just elements with that classname. The rule is only applied if that element has the classname but counting includes all siblings with and without the class.

What I am trying to say is that just because you use a classname before the nth-child it doesn’t just check those elements with that classname. It checks all siblings and then if the even sibling happens to have the right classname the rule is applied.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.test:nth-child(even){background:red}
</style>
</head>

<body>
<div>test 1</div>
<div class="test">test 2</div>
<div class="test">test 3</div>
<div>test 4</div>
<div>test 5</div>
</body>
</html>

There are 2 elements with a class of .test only but it is the first element that gets selected because it is the second sibling in that context.:slight_smile:

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.