CODEWITHSUNDEEP
htmlcss
Jitendra Vyas
Jitendra Vyas

Reputation: 152677

How to reduce the uses of CSS IDs and Classes in mark-up using HTML5 and CSS3?

How to reduce the uses of CSS IDs and Classes in mark-up using HTML5 and CSS3?

Which HTML5 tags and CSS3 properties can reduce the need of classes and IDs

Currently I know

       <header>
        <nav>
        <section>
        <article>
        <aside>
        <footer>
    <time>
    <figure>
    <dialog>
    <mark>
<figcaption>
<hgroup>

Upvotes: 5

Views: 168

Answers (2)

Zachary Scott
Zachary Scott

Reputation: 21172

The way these reference neighbors could be considered using less ids, and the html 5 tags with colons. This came from the Mix 11 videos.

CSS pop up 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;}

Upvotes: 5

alex
alex

Reputation: 490243

Pseudo classes can do that, such as :first-child and :last-child, the latter which is new in CSS3.

You are better off having a look here.

Upvotes: 4

Related Questions