Menu
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>
678
The difference between Class and ID selector The difference between an ID and a class is that an ID is only used to identify one single element in our HTML. IDs are only used when one element on the page should have a particular style applied to it. However, a class can be used to identify more than one HTML element.
You should use a class if you need to use the same selector more than once within a page or a site. While an ID is specific to a single element, classes can be assigned to multiple elements on a page or throughout the website. They are not unique.
CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file.
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;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
