good day!
so have problem in creating periodic table using external css file (i'm not allowed use tag).
here sample:
<!doctype html> <html> <head> <title>periodic table</title> <link rel="stylesheet" type="text/css" href="s3372661.css"> </head> <body> <div id="row_0"> <div id="1" class="element pos_0"> <span class="number">1</span> <br> <span class="symbol">h</span> <br> <span class="name">hydrogen</span> <br> <span class="molar">1.00794</span> <br> <span class="group"></span> <br> </div> <div class="element pos_1"></div> <div class="element pos_2"></div> <div class="element pos_3"></div> <div class="element pos_4"></div> <div class="element pos_5"></div> <div class="element pos_6"></div> <div class="element pos_7"></div> <div class="element pos_8"></div> <div class="element pos_9"></div> <div class="element pos_10"></div> <div class="element pos_11"></div> <div class="element pos_12"></div> <div class="element pos_13"></div> <div class="element pos_14"></div> <div class="element pos_15"></div> <div class="element pos_16"></div> <div id="2" class="element pos_17"> <span class="number">2</span> <br> <span class="symbol">he</span> <br> <span class="name">helium</span> <br> <span class="molar">4.002602</span> <br> <span class="group">element noble p</span> <br> </div> </body> </htmt> and css file:
body { background-color: #fff; width:960px; display:table; } div { display: table-row; vertical-align: inherit; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 9px; border: 3px solid #fff; background-color: red; } .element { text-align: center; padding: 10px 5px; display: table-cell; vertical-align: inherit; min-width: 5em; border: 2px #fff solid; background-color: inherit; } .number { font-size:9px; font-family:arial, helvetica, sans-serif; color: white; } .symbol { font-size:20px; font-family:arial, helvetica, sans-serif; color: white; font-weight:bold; } .name { font-size:15px; font-family:arial, helvetica, sans-serif; color: white; font-style:italic; } .molar { font-size:10px; font-family:arial, helvetica, sans-serif; color: white; } .group { font-size:15px; font-family:arial, helvetica, sans-serif; color: white; } the problem how can make unwanted block disappear without using specificity each block?
such as:
#row_0 .element.pos_1 { background-color: white }
are css3 selectors allowed?
.element:empty { visibility: hidden; } 
Comments
Post a Comment