css zebra stripe background without image
It's a little hard to understand what you're after, but I would suggest maybe looking into Base64 encoded images in css
Base64 Encoding Image
or alternatively using canvas or the svg namespace to draw it yourself
How to create zebra stripes on html table without using javascript and even/odd classes generation?
It is possible, with CSS3 selectors:
tr:nth-child(even) {
background-color: red;
}
tr:nth-child(odd) {
background-color: white;
}
According to caniuse.com, every browser supports it now.
Zebra Stripe using CSS
You can do it like this:
.parent { display: flex; flex-wrap: wrap;}
.child { flex-basis: 50%; height: 25px; background: #7F7F7F;}
.child:nth-child(4n+1),.child:nth-child(4n+4) { background: #FF0080;}<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div></div>CSS Background Stripes on div
try this :
div#stripes { height: 200px; width: 200px; background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, #fff); background-size: 50px 50px;}<div id="stripes">
</div>Setting the background colour of zebra-striped table rows
Simply change the "redbg" class to add the tr to the front:
tr.redbg {
background-color: #FF6666;
}
This occurs because tr:nth-child(2n+1) is more specific than .redbg so it overrides the background color no matter what. Changing it to tr.redbg makes it just as specific so the "redbg" class will override the :nth-child() selector.
See the jsFiddle
Note for future reference: The tr.redbg selector has to be defined after the tr:nth-child(2n+1) selector in order for it to override the background color.
Jquery: change background color of zebra striped divs?
Simply have a more specific .selectedRow for the odd ones in your css, too:
.selectedRow,
div.row div.selectedRow:nth-child(odd) {
background-color: #338FFF;
}
Demo http://jsfiddle.net/jh602sxk/1/
Zebra stripe every two TRs in a row with CSS.
Like this? http://jsfiddle.net/GQNUV/1/
table tr:nth-child(4n-1), table tr:nth-child(4n) {
background: #ccc;
}
Why is my zebra-striping CSS not applying to my table rows?
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>Related Topics
Configuring Compass on Windows
:Has Vs: Matches - Selectors Level 4
CSS Background Color Extend as Far as Text
Slide Flickering with CSS Transitions
Apply a Different CSS Width Property Based on Browser? (Ie8, Ff)
Twitter Bootstrap Grid Vertical Align Bottom
CSS: Two Divs - One Fills Space, One Shrink-To-Fit
How to Make Multiple Spans Equal Width Within a Div
Large Iconfont Icon Cut Off on The Right Side
Repeated Series of Number via CSS
CSS3 Transform Scale and Container with Overflow
Sass Syntax Highlighting in Visual Studio
How to Use Bootstrap 5 Custom Color Directly in The Class Attribute
How to Make an <A> 100% Height of <Li>
Load Different CSS Rule Depending on The Browser in an Angular 4 Component