48 posts / categories / feed

CSS3 Quick Tips – Pseudo Class

Back to home

You can use pseudo class in CSS3 such as:

E.g. 1- Using nth-child

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to HTML5 Tuts!</title>
<link rel="stylesheet" href="main.css">
</head>

<body>
<div id="theparent">
<p class="child">This is a sentence.</p>
<p class="child">This is a sentence.</p>
<p class="child">This is a sentence.</p>
<p class="child">This is a sentence.</p>
<p class="child">This is a sentence.</p>
</div>
</body>
</html>

Main.css

p:nth-child(odd) { color: green; }
p:nth-child(even) { color: red; }

Basically this is saying, make every odd child will get the style of green, and every other even child will get the color of red.

Screenshot for E.g. 1

E.g. 2 – Using Negation Pseudo Class


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to HTML5 Tuts!</title>
<link rel="stylesheet" href="main.css">
</head>

<body>
<div id="theparent">
<p class="childa">This is a sentence.</p>
<p class="childb">This is a sentence.</p>
<p class="childa">This is a sentence.</p>
<p class="childb">This is a sentence.</p>
<p class="childb">This is a sentence.</p>
</div>
</body>
</html>

Main.css

* {color: blue;}
:not(.childa) {color: red;};

Basically what this is saying is that make all items blue, and anything that is not termed as the class = childa are red, which is why the <p> with class = childb are all in red.

Screenshot of the result for E.g. 2:

« — »