CSS – Classes, IDs, Pseudo-classes and more…

Class

You can create a name for a specific group of elements and then you can apply a style.

Create a class

CSS - Classes IDs Pseudo-classes and more..., <span>CSS – Classes, IDs, Pseudo-classes and more…</span>, KandZ

Create a style for this class

.myClass{
background-color: aquamarine;
}
CSS - Classes IDs Pseudo-classes and more..., <span>CSS – Classes, IDs, Pseudo-classes and more…</span>, KandZ

id

You can create a name for a specific element and then you can apply a style.

<p id="name">
I am KRONOS
</p>

#name{
color: blue;
font-size: 2em;
}
CSS - Classes IDs Pseudo-classes and more..., <span>CSS – Classes, IDs, Pseudo-classes and more…</span>, KandZ

Pseudo-classes

Pseudo-classes permit formatting based on element’s state and not on information that lies on the document tree(tags). They should always be applied to an existing selector and you use: and then the name. Here is a good list of pseudo-classes.

CSS - Classes IDs Pseudo-classes and more..., <span>CSS – Classes, IDs, Pseudo-classes and more…</span>, KandZ
CSS - Classes IDs Pseudo-classes and more..., <span>CSS – Classes, IDs, Pseudo-classes and more…</span>, KandZ

The above pseudo-class and its property will make the anchor’s link background color brown when the mouse hover it.

CSS - Classes IDs Pseudo-classes and more..., <span>CSS – Classes, IDs, Pseudo-classes and more…</span>, KandZ
normal
CSS - Classes IDs Pseudo-classes and more..., <span>CSS – Classes, IDs, Pseudo-classes and more…</span>, KandZ
hovered

Target a nested element

You can also target a specific element or elements, by writing the whole tree of the elements. For example you have an anchor tag inside a paragraph tag

CSS - Classes IDs Pseudo-classes and more..., <span>CSS – Classes, IDs, Pseudo-classes and more…</span>, KandZ

You can target this anchor tag only by writing in order the tags separated with space.

CSS - Classes IDs Pseudo-classes and more..., <span>CSS – Classes, IDs, Pseudo-classes and more…</span>, KandZ

Here is the whole html:

CSS - Classes IDs Pseudo-classes and more..., <span>CSS – Classes, IDs, Pseudo-classes and more…</span>, KandZ

and the CSS file:

CSS - Classes IDs Pseudo-classes and more..., <span>CSS – Classes, IDs, Pseudo-classes and more…</span>, KandZ

As you can see there are 2 styles for a tag, and they have different background-color. The second one that is more specific it has priority.

CSS - Classes IDs Pseudo-classes and more..., <span>CSS – Classes, IDs, Pseudo-classes and more…</span>, KandZ

Just remember that a more specific rule always wins. More specific means that the rule target less elements. If two rules are the same then the latest loaded wins.

THE END!!!

83580cookie-checkCSS – Classes, IDs, Pseudo-classes and more…CSS – Classes, IDs, Pseudo-classes and more…

Related posts

3 Thoughts to “CSS – Classes, IDs, Pseudo-classes and more…

  1. […] CSS – Classes, IDs, Pseudo-classes and more… […]

  2. […] CSS – Classes, IDs, Pseudo-classes and more… […]

  3. […] CSS – Classes, IDs, Pseudo-classes and more… […]

Comments are closed.