Geek Answers Handbook

How to reduce the use of CSS identifiers and classes in markup using HTML5 and CSS3?

How to reduce the use of CSS identifiers and classes when markup using HTML5 and CSS3?

What HTML5 tags and CSS3 properties can reduce the need for classes and identifiers

I currently know

       <header>
        <nav>
        <section>
        <article>
        <aside>
        <footer>
    <time>
    <figure>
    <dialog>
    <mark>
<figcaption>
<hgroup>
+5
source share
2 answers

How one might consider these reference neighbors using fewer identifiers, and html 5 tags with colons. This came from the Mix 11 video.

CSS popup menu:

.menu > li > ul {display: none;}
.menu > li:hover > ul { display:block;}

Dependent Content:

.faq > div {display:none;}
.faq > div:target {display:block;}

Validation:

:valid, :invalid, :required, :optional, :in-range, :out-of-range, 
:read-only, :read-write

#signup input:focus:required:valid + .val .invalid {display:none;}
#signup input:focus:required:invalid + .val .valid {display:none;}

animations:

.faq > div {display:none;}
.faq > div:target {display:block;position:relative;
       -webkit-animation:throb 1.5s infinite;}
+5
source

-, :first-child :last-child, CSS3.

.

+4

More articles:


All Articles