The following shows the difference between html selectors, class and id.
<div class = "heading">
<a id = "current" href="home.html">Home</a
<h1>About the running club</h1>
.heading { /* CLASS, can be used in more than one place, referring to multiple elements */
}
#current{ /* ID, used to specifically identify a single element */
}
h1{ /* SELECTOR, that is, it represents an html tag */
}
Grouping
a, .heading, h2{
color: red;
}
Nesting
#top{
padding: 3px;
}
#top h1{ /* applied to h1 inside "top" */
font-weight:bold;
}
#top p{ /* applied to p inside "top" */
color: red;
}
<div id="top">
<h1> Title </h1>
<p> some text </p>
</div>
Also and this is important...
If we had a table which we named as a class "live-table" and on our
page, we also had a table with no class defined, then in our css we
would have to refer to our class as below;
table.live-table {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
width: 100%;
}
table.live-table thead, table.live-table th, table.live-table tr, table.live-table td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
If we were to use;
table.live-table, td {
}
the the td would refer to the normal table and not the table with the class live table.
Pseudo Classes
a:link { /* link */
color: blue;
}
a:visited { /* visited */
color: purple;
}
a:active { /* current */
color: red;
}
a:hover { /* hover */
text-decoration: none;
color: blue;
background-color: yellow;
}
input:focus, textarea:focus {
background: #eee;
}
First Children
p:first-child { /* Will only apply to the first <p> below, the 1st descendant of an element. */
font-weight: bold;
font-size: 40px;
}
<body>
<p>I'm the first</p>
<p>I'm just normal</p>
No comments:
Post a Comment
Note: only a member of this blog may post a comment.