How to target a specific element within a div id? - css

Question

I'm trying to build a HTML/CSS periodic table. I have this as my HTML code:
<div id="Hydrogen">
<p>1</p>
H
Hydrogen
1.00794
</div>
and this is my CSS code:
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 100px;
font-size: 13px;
}
#hydrogen {
background: #fff;
margin: 0 auto;
width: 50px;
padding: 30px;
text-align: center;
/* border-radius */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* box-shadow */
-webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
position: absolute;
}
How do I target the <p>1</p> tag in my #hydrogen ID? Basically, I want to display a 1 on the top-left corner of the div cell. Also, is this the best method of doing this, or is there a easier way?

Answer 1

If it’s the only p element within that div, then sinply
#Hydrogen p { … }
Otherwise, if it’s the first one,
#Hydrogen p:first-child { … }
This are absolute CSS selector basics – so you should perhaps read some tutorials on that matter.

Answer 2

Something along the lines of
#hydrogen p { position:absolute; left:0; top:0;}
should get you started.

Answer 3

You can also use the command "span".
Example:
<p><span>1</span></p>
CSS:
span { font-size:14; }
You can expend this code with "id" or "class".
ID-Example:
<p><span id="name">1</span></p>
CSS:
#name { font-size:14; }
Class-Example:
<p><span class="large">1</span></p>
CSS:
.large { font-size:14; }

Answer 4

There is nothing wrong with:
#hydrogen p{..}
but as you said you want to do periodic table so you will have 103 elements so than for every p-element you will have to write:
#hydrogen p{..}
#helium p{...}
#lithium p{...}
... and so 103 times, same thing with divs with Id's
Better solution would be to give p and div class name
.atomic-number{...}
.grid-cell{...}
<div class="grid-cell">
<p class="atomic-number">1</p>
H
Hydrogen
1.00794
</div>
You can style all elements with just two lines of CSS
EDIT
Create rows, and position elements inside them.
For example float all grid cells left, if you need something to stick on the right side add class="right" (1st row) you probably will have to change colours same way, also you can create invisible cells and fill space with them (2nd row)
http://fiddle.jshell.net/tH7Pq/1/
If you want you can read more about classes, id's and selectors here:
Id's and classes
multiple classes
child-and-sibling