Dynamic Javascript Content

JSON format.

my basic dynamic content.

LIVE DEMO:

See the Pen xml-code by clark fortuna (@graydirt) on CodePen.

CSS3 Transitions

transition

css3 transition properties

css3 transition show that we can add effects via css or jquery and it has 4 properties see below, but i used the shorthand of it.
.mytransition {
     transition-property transition-duration transition-timing-function transition-delay
}

CSS:
.mytransition {
     background:blue;
     width:200px;
     padding:10px;
     height:150px;
     transition: all .5s linear;
     color:white;
}

.mytransition:hover {
     background:yellow;
     color:red;
}

HTML:

<div class="mytransition">your content here...</div>

LIVE DEMO:

See the Pen css3 transition by clark fortuna (@graydirt) on CodePen.

LIVE DEMO 2:advanced css3 transition

See the Pen advance css3 transition by clark fortuna (@graydirt) on CodePen.

:nth-child and :nth-of-type

:nth-child{}

CSS:
.div1 p:nth-child(2){
   color:#ff0000;
}

:nth-child(2) = select a color for every p element that is the second child of its parent class .div1

HTML:
<div class="div1">
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
</div>

OUTPUT:

now if we insert <h2> tag above the the first paragraph:
<div class="div1">
  <h2>heading</h2>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
</div>

OUTPUT:

> because the :nth-child selector apply in the second element of the class .div1

:nth-of-type{}

CSS:
.div1 p:nth-of-type(2){  
  color:#ff0000;
}

:nth-of-type(2) = select the second paragraph child of a parent.

HTML:
<div class="div1">
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
</div>

OUTPUT:

now insert again <h2> tag above the the first paragraph:
<div class="div1">
  <h2>heading</h2>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
</div>

OUTPUT:

> because the :nth-of-type strictly target the second element in your css declaration unlike the nth-child.

for me its ok to use :nth-of-type instead of :nth-child because its less conditional. 

You can also use :nth-child and :nth-of-type via jquery.

CSS Pseudo-elements for :before and :after

The ":before" pseudo-element can be used to insert some content before the content of an element.
The ":after" pseudo-element can be used to insert some content after the content of an element.

:before and :after

CSS:
.main:before {
    color:#ff0000;
    font-size:24px;
    content:"before"
}
.main:after {
    color:#ff0000;
    font-size:24px;
    content:"after"
}

HTML:
<div class="main">
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
</div>

OUTPUT:
 before Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. after

CSS Pseudo-elements for :first-letter and :first-line

:first-letter and :first-line are css pseudo-elements, only be applied to the block elements such as div, p, ul, table etc...

:first-letter

CSS:
div:first-letter{
     color:#ff0000;
}

HTML:
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</div>

OUTPUT:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text.

:first-line

CSS:
div:first-line{
     color:#ff0000;
}

HTML:
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</div>

OUTPUT:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text.

css elements and selectors

css elements

div {
      font-family:Arial, Helvetica, sans-serif;
}
.div {
      font-family:Arial, Helvetica, sans-serif;
}
#div {
      font-family:Arial, Helvetica, sans-serif;
}

where:
"div" = is a selector  indicate which element the rule applies to, or HTML element you want to style.
" font-family:Arial, Helvetica, sans-serif;" = is a declaration consists of a
property(font-family:) and a value(Arial, Helvetica, sans-serif;)

some css selectors

*{} = universal selectors

example:
* {
margin:0px;
padding:0px;
}

meaning:
Selects all elements

.{} = class selectors

example:
.graydirt {
margin:0px;
padding:0px;
}
HTML:
<div class="graydirt">1</div>
<div class="graydirt">2......</div>

meaning:
Selects all elements with class="graydirt". Also classes can be used to identify more than one in your documents/pages.

#{} = id selectors

example:
#graydirt {
margin:0px;
padding:0px;
}
HTML:
<div id="graydirt">1</div>

meaning:
Selects the element with id="graydirt". Also ID can be used to identify one element in your document/page.

li > a = child selectors

example:
li > a {
color:#ff0000;
}

HTML:
<ul>
   <li><a href="#">lorem</a>
         <div><a href="#">lorem2</a></div>
   </li>
</ul>

output:
lorem
lorem2

meaning:
Targets only the first "a" elements that are children of an "li" element (but not other "a" elements inside the "li").

li a = descendant selectors

example:
li a {
margin:0px;
padding:0px;
}

HTML:
<ul>
   <li><a href="#">lorem</a>
         <div><a href="#">lorem2</a></div>
   </li>
</ul>

output:
lorem
lorem2

meaning:
Targets all "a" elements inside the "li".