CODEWITHSUNDEEP
csshtml
user3205160
user3205160

Reputation: 137

How to target a specific element within a div id?

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?

Upvotes: 1

Views: 29714

Answers (4)

amaro
amaro

Reputation: 261

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

Upvotes: 0

user3233077
user3233077

Reputation:

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; }

Upvotes: 1

Ulrich Schwarz
Ulrich Schwarz

Reputation: 7727

Something along the lines of

#hydrogen p { position:absolute; left:0; top:0;}

should get you started.

Upvotes: 0

C3roe
C3roe

Reputation: 96306

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.

Upvotes: 4

Related Questions