Why is my zebra-striping CSS not applying to my table rows? - html

Question

I tried zebra striping my table in a React application here. However, it is not being applied. Here are the relevant styles:
tr:nth-child(even) {
background-color: rgba(0,100,1,0.5)
}
tr:nth-child(odd) {
background-color: rgba(0,100,1,0.3)
}
And the full demo:
'use strict';
var /*var Leaderboard = React.createClass({
getInitialState: function(){
/*var recentCampers= [];
var allTimeCampers= [];*/
//return {toggle30: 'true'};
/*return {recentCampers: [],
allTimeCampers: [],
toggle30: 'true'};
this.recentCampers= this.recentCampers.bind(this);
this.allTimeCampers.bind(this);
this.toggle30= this.toggle30.bind(this); */
/* },
componentDidMount: function(){return axios.all([this.getTopRecentCampers(),this.getTopAlltimeCampers()]).then(function(arr){return {
recentCampers: arr[0].data,
allTimeCampers: arr[1].data};
console.log(this.state.recentCampers[0].username); })},
/*
getTopRecentCampers: function(){return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent');},
getTopAlltimeCampers: function(){return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/alltime');},
toggleViewOne: function(){this.setState({toggle30: 'true'});},
toggleViewTwo: function(){this.setState({toggle30: 'false'});},
/* render: function(){return (<div>
<h6>Sort by:</h6> <button onClick={this.toggleViewOne} className="btn">Points in past 30 days <span className="fa fa-sort-desc"> </span></button> <button onClick={this.toggleViewTwo} className="btn"> All time points <span className="fa fa-sort-desc"> </span> </button> <h1> freeCodeCamp <span className="fa fa-free-code-camp"> </span> </h1> <hr></hr> <div className="table-responsive"> <table className="table"> <thead> <tr> <th> <td> # </td> <td> Camper name </td> <td> Points in last month </td> <td> All time points </td> </th> </tr> </thead> <tbody>
//</tbody> </table> </div> </div>);} */
/* });
var Tbody = React.createClass({
render: function(){return (<tbody> {} </tbody>);}
});*/
/*</tr> <tr> <td> gtew</td> </tr> <tr> <td> gffs</td> </tr>this.recentCampers= this.recentCampers.bind(this);
this.allTimeCampers.bind(this) */
/*
ReactDOM.render(<Leaderboard />,document.getElementById('freeCodeCamp'));
---------------------------------------------------------------------------- */Leaderboard = React.createClass({
displayName: 'Leaderboard',
getInitialState: function getInitialState() {
return {
recentCampers: [],
allTimeCampers: [],
toggle: 'recentCampers'
};
},
componentWillMount: function componentWillMount() {
return this.getRequest();
},
getRequest: function getRequest() {
return axios.all([this.getTopRecentCampers(), this.getTopAlltimeCampers()]).then(function (arr) {
this.setState({
recentCampers: arr[0].data,
allTimeCampers: arr[1].data
});
/*var recent= [];
recent= this.state.recentCampers;
for (var i=0;i>=100;i++){return recent[i];};
//console.log(this.state.recentCampers[0].username);*/
}.bind(this));
},
getTopRecentCampers: function getTopRecentCampers() {
return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent');
},
getTopAlltimeCampers: function getTopAlltimeCampers() {
return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/alltime');
},
toggleViewOne: function toggleViewOne() {
this.setState({
toggle: 'recentCampers'
});
},
toggleViewTwo: function toggleViewTwo() {
this.setState({
toggle: 'allTimeCampers'
});
},
render: function render() {
return React.createElement(
'div',
null,
' ',
' ',
React.createElement(
'h6',
null,
'Sort by:'
),
' ',
React.createElement(
'button',
{ onClick: this.toggleViewOne, className: 'btn' },
'Points in past 30 days ',
React.createElement(
'span',
{ className: 'fa fa-sort-desc' },
' '
)
),
' ',
React.createElement(
'button',
{ onClick: this.toggleViewTwo, className: 'btn' },
' All time points ',
React.createElement(
'span',
{ className: 'fa fa-sort-desc' },
' '
),
' '
),
' ',
React.createElement(
'h1',
null,
' freeCodeCamp ',
React.createElement(
'span',
{ className: 'fa fa-free-code-camp' },
' '
),
' '
),
' ',
React.createElement('hr', null),
' ',
React.createElement(
'div',
{ className: 'table-responsive' },
' ',
React.createElement(
'table',
{ className: 'table' },
' ',
React.createElement(
'thead',
null,
' ',
React.createElement(
'tr',
null,
' ',
React.createElement(
'th',
null,
' ',
React.createElement(
'td',
{ style: { width: '80px' }, className: 'text-center' },
' # '
),
' ',
React.createElement(
'td',
{ style: { width: '600px' } },
' Camper name '
),
' ',
React.createElement(
'td',
{ style: { width: '400px' }, className: 'text-center' },
' Points in last month '
),
' ',
React.createElement(
'td',
{ style: { width: '400px' }, className: 'text-center' },
' All time points '
),
' '
),
' '
),
' '
),
' ',
React.createElement(
'tbody',
null,
' ',
React.createElement(Map, { data: this.state[this.state.toggle] })
),
' '
),
' '
),
' '
);
}
});
//{<Tbody data={this.state}
/*
-------------------------------------------------------------------------- */
var Map = React.createClass({
displayName: 'Map',
render: function render() {
var rows = this.props.data.map(function (row, index) {
return React.createElement(Tbody, { rank: index + 1, data: row });
});
return React.createElement(
'tbody',
{ id: 'stripe' },
rows
);
}
});
/*
-------------------------------------------------------------------------- */
var Tbody = React.createClass({
displayName: 'Tbody',
render: function render() {
return React.createElement(
'div',
null,
' ',
/*<h1>{this.props.data.username}</h1>*/React.createElement(
'tr',
null,
React.createElement(
'td',
{ style: { width: '80px' }, className: 'text-center' },
this.props.rank + '.'
),
React.createElement(
'td',
{ style: { width: '600px' } },
React.createElement(
'a',
{ target: '_blank', href: 'http://freecodecamp.com/' + this.props.data.username },
React.createElement('img', { src: this.props.data.img }),
' ',
React.createElement(
'span',
null,
this.props.data.username
)
)
),
React.createElement(
'td',
{ id: 'recent', className: 'text-center' },
this.props.data.recent
),
React.createElement(
'td',
{ id: 'all', className: 'text-center' },
this.props.data.alltime
)
),
' '
);
//console.log(JSON.stringify(this.props));*/
}
});
/*
-------------------------------------------------------------------------- */
ReactDOM.render(React.createElement(Leaderboard, null), document.getElementById('freeCodeCamp'));
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: linear-gradient(161deg, #006401 0%, #FCFFEE 100%);
background-attachment: fixed;
color: #502d17;
margin-left: 20px;
margin-right: 20px;
}
button {
margin: 5px;
background-image: -webkit-linear-gradient(#006401, #FCFFEE);
background-attachment: fixed;
color: #FCFFEE;
box-shadow: inset -1px -3px 10px 1px #515151;
margin-bottom: 20px;
}
button:active {
transform: translate(0, 3px);
box-shadow: none;
text-decoration: none;
outline: none;
}
button:hover, button:active, button:visited {
text-decoration: none;
outline: none;
}
h6 {
margin-left: 10px;
margin-top: 15px;
margin-bottom: 5px;
}
h1 {
color: rgba(245, 245, 245, 0.5);
margin-left: 5px;
}
.fa-free-code-camp {
font-size: 1em;
color: rgba(245, 245, 245, 0.7);
}
table, td {
border: 1px solid grey;
table-layout: fixed;
}
tr:nth-child(even) {
background-color: rgba(0, 100, 1, 0.5);
}
tr:nth-child(odd) {
background-color: rgba(0, 100, 1, 0.3);
}
img {
border-radius: 100%;
height: 60px;
}
a {
text-decoration: none;
color: #502d17;
}
#all {
max-width: 280px;
min-width: 280px;
}
#recent {
max-width: 280px;
min-width: 280px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.8.1/axios.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="freeCodeCamp"></div>

Answer 1

As your HTML markup is pulled in within your codepen I'm not sure how useful this is to future users but in the context of your codepen your selectors are incorrect.
Your tbody does not contain tr siblings but each tr is wrapped into a div, hence you need to target those instead.
tbody>div:nth-child(even)
background-color: rgba(0,100,1,0.5)
tbody>div:nth-child(odd)
background-color: rgba(0,100,1,0.3)
See updated CodePen
'use strict';
var /*var Leaderboard = React.createClass({
getInitialState: function(){
/*var recentCampers= [];
var allTimeCampers= [];*/
//return {toggle30: 'true'};
/*return {recentCampers: [],
allTimeCampers: [],
toggle30: 'true'};
this.recentCampers= this.recentCampers.bind(this);
this.allTimeCampers.bind(this);
this.toggle30= this.toggle30.bind(this); */
/* },
componentDidMount: function(){return axios.all([this.getTopRecentCampers(),this.getTopAlltimeCampers()]).then(function(arr){return {
recentCampers: arr[0].data,
allTimeCampers: arr[1].data};
console.log(this.state.recentCampers[0].username); })},
/*
getTopRecentCampers: function(){return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent');},
getTopAlltimeCampers: function(){return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/alltime');},
toggleViewOne: function(){this.setState({toggle30: 'true'});},
toggleViewTwo: function(){this.setState({toggle30: 'false'});},
/* render: function(){return (<div>
<h6>Sort by:</h6> <button onClick={this.toggleViewOne} className="btn">Points in past 30 days <span className="fa fa-sort-desc"> </span></button> <button onClick={this.toggleViewTwo} className="btn"> All time points <span className="fa fa-sort-desc"> </span> </button> <h1> freeCodeCamp <span className="fa fa-free-code-camp"> </span> </h1> <hr></hr> <div className="table-responsive"> <table className="table"> <thead> <tr> <th> <td> # </td> <td> Camper name </td> <td> Points in last month </td> <td> All time points </td> </th> </tr> </thead> <tbody>
//</tbody> </table> </div> </div>);} */
/* });
var Tbody = React.createClass({
render: function(){return (<tbody> {} </tbody>);}
});*/
/*</tr> <tr> <td> gtew</td> </tr> <tr> <td> gffs</td> </tr>this.recentCampers= this.recentCampers.bind(this);
this.allTimeCampers.bind(this) */
/*
ReactDOM.render(<Leaderboard />,document.getElementById('freeCodeCamp'));
---------------------------------------------------------------------------- */Leaderboard = React.createClass({
displayName: 'Leaderboard',
getInitialState: function getInitialState() {
return {
recentCampers: [],
allTimeCampers: [],
toggle: 'recentCampers'
};
},
componentWillMount: function componentWillMount() {
return this.getRequest();
},
getRequest: function getRequest() {
return axios.all([this.getTopRecentCampers(), this.getTopAlltimeCampers()]).then(function (arr) {
this.setState({
recentCampers: arr[0].data,
allTimeCampers: arr[1].data
});
/*var recent= [];
recent= this.state.recentCampers;
for (var i=0;i>=100;i++){return recent[i];};
//console.log(this.state.recentCampers[0].username);*/
}.bind(this));
},
getTopRecentCampers: function getTopRecentCampers() {
return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent');
},
getTopAlltimeCampers: function getTopAlltimeCampers() {
return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/alltime');
},
toggleViewOne: function toggleViewOne() {
this.setState({
toggle: 'recentCampers'
});
},
toggleViewTwo: function toggleViewTwo() {
this.setState({
toggle: 'allTimeCampers'
});
},
render: function render() {
return React.createElement(
'div',
null,
' ',
' ',
React.createElement(
'h6',
null,
'Sort by:'
),
' ',
React.createElement(
'button',
{ onClick: this.toggleViewOne, className: 'btn' },
'Points in past 30 days ',
React.createElement(
'span',
{ className: 'fa fa-sort-desc' },
' '
)
),
' ',
React.createElement(
'button',
{ onClick: this.toggleViewTwo, className: 'btn' },
' All time points ',
React.createElement(
'span',
{ className: 'fa fa-sort-desc' },
' '
),
' '
),
' ',
React.createElement(
'h1',
null,
' freeCodeCamp ',
React.createElement(
'span',
{ className: 'fa fa-free-code-camp' },
' '
),
' '
),
' ',
React.createElement('hr', null),
' ',
React.createElement(
'div',
{ className: 'table-responsive' },
' ',
React.createElement(
'table',
{ className: 'table' },
' ',
React.createElement(
'thead',
null,
' ',
React.createElement(
'tr',
null,
' ',
React.createElement(
'th',
null,
' ',
React.createElement(
'td',
{ style: { width: '80px' }, className: 'text-center' },
' # '
),
' ',
React.createElement(
'td',
{ style: { width: '600px' } },
' Camper name '
),
' ',
React.createElement(
'td',
{ style: { width: '400px' }, className: 'text-center' },
' Points in last month '
),
' ',
React.createElement(
'td',
{ style: { width: '400px' }, className: 'text-center' },
' All time points '
),
' '
),
' '
),
' '
),
' ',
React.createElement(
'tbody',
null,
' ',
React.createElement(Map, { data: this.state[this.state.toggle] })
),
' '
),
' '
),
' '
);
}
});
//{<Tbody data={this.state}
/*
-------------------------------------------------------------------------- */
var Map = React.createClass({
displayName: 'Map',
render: function render() {
var rows = this.props.data.map(function (row, index) {
return React.createElement(Tbody, { rank: index + 1, data: row });
});
return React.createElement(
'tbody',
{ id: 'stripe' },
rows
);
}
});
/*
-------------------------------------------------------------------------- */
var Tbody = React.createClass({
displayName: 'Tbody',
render: function render() {
return React.createElement(
'div',
null,
' ',
/*<h1>{this.props.data.username}</h1>*/React.createElement(
'tr',
null,
React.createElement(
'td',
{ style: { width: '80px' }, className: 'text-center' },
this.props.rank + '.'
),
React.createElement(
'td',
{ style: { width: '600px' } },
React.createElement(
'a',
{ target: '_blank', href: 'http://freecodecamp.com/' + this.props.data.username },
React.createElement('img', { src: this.props.data.img }),
' ',
React.createElement(
'span',
null,
this.props.data.username
)
)
),
React.createElement(
'td',
{ id: 'recent', className: 'text-center' },
this.props.data.recent
),
React.createElement(
'td',
{ id: 'all', className: 'text-center' },
this.props.data.alltime
)
),
' '
);
//console.log(JSON.stringify(this.props));*/
}
});
/*
-------------------------------------------------------------------------- */
ReactDOM.render(React.createElement(Leaderboard, null), document.getElementById('freeCodeCamp'));
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: linear-gradient(161deg, #006401 0%, #FCFFEE 100%);
background-attachment: fixed;
color: #502d17;
margin-left: 20px;
margin-right: 20px;
}
button {
margin: 5px;
background-image: -webkit-linear-gradient(#006401, #FCFFEE);
background-attachment: fixed;
color: #FCFFEE;
box-shadow: inset -1px -3px 10px 1px #515151;
margin-bottom: 20px;
}
button:active {
transform: translate(0, 3px);
box-shadow: none;
text-decoration: none;
outline: none;
}
button:hover, button:active, button:visited {
text-decoration: none;
outline: none;
}
h6 {
margin-left: 10px;
margin-top: 15px;
margin-bottom: 5px;
}
h1 {
color: rgba(245, 245, 245, 0.5);
margin-left: 5px;
}
.fa-free-code-camp {
font-size: 1em;
color: rgba(245, 245, 245, 0.7);
}
table, td {
border: 1px solid grey;
table-layout: fixed;
}
tbody>div:nth-child(even){
background-color: rgba(0, 100, 1, 0.5);
}
tbody>div:nth-child(odd) {
background-color: rgba(0, 100, 1, 0.3);
}
img {
border-radius: 100%;
height: 60px;
}
a {
text-decoration: none;
color: #502d17;
}
#all {
max-width: 280px;
min-width: 280px;
}
#recent {
max-width: 280px;
min-width: 280px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.8.1/axios.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="freeCodeCamp"></div>
Just to add, while the above works, I think your JavaScript generates invalid HTML to begin with as I think a div is not allowed as a child inside a tbody wrapping tr elements. If this is your own code, you can update it to use multiple tbody siblings inside the table element, each containing tr elements, instead of nested tbody elements with a div wrapping tr elements. If this is not your own code but the code you got from freeCodeCamp, I would consider switching code camp.

Answer 2

Your table markup is invalid. Your rows shouldn't be wrapped in divs.
The reason nth-child isn't working in this case is because it can only iterate through sibling elements(https://www.w3.org/TR/css3-selectors/#nth-child-pseudo).
Remove your wrapping divs in Leaderboard render function and it should work just fine.