Css Course


Pseudo-classes allow adding CSS rules to certain parts of the same selector.
For example, when you define a style for a HTML tag or a particular class, the content of all those tags or class will have the same style. If you want to define a different style for the first (or last) element of those tags or for the first content of a group of elements with the same class, you can accomplish this by using pseudo-classes.
Also, they can change the graphic style of items when the mouse is acting on them.


- Syntax:
selector:pseudo-class { property: value; }
Or, used with class:
selector.class:pseudo-class { property: value; }

List with Pseudo-classes


To understand CSS pseudo-classes, how they work and what is their effect, study the following examples.


Pseudo-classes with type selector

Type selectors refer to HTML tags which they define (eg.: p for <p>, li for <li>, div for <div>, etc.).
In the following example is used first-child with paragraphs.

<style>
p:first-child {
color:blue;
}
</style>

<h4>Example first-child</h4>
<blockquote>Apply css style to first P tag.</blockquote>

<div>
<p>A text within the first paragraph</p>
<p>Content in the second paragraph</p>
<p>Text content in the third paragraph</p>
</div>
• Other example, with the hover value applied to <li> tags.
<style>
li:hover {
background-color:#88fe88;
}
</style>

<h4>Example hover</h4>
<p>When you place the mouse over each LI, it will have a green background.</p>

<ul>
 <li>Free courses and tutorials</li>
 <li>Web site: https://coursesweb.net</li>
 <li>Web site: marplo.net</li>
</ul>

Pseudo-classes with class

Pseudo-classes are not the same with classes. The classes refer to the value of a class attribute, in stylesheets are added after a (.) character.
- In the next example are used lang and last-child applied to a class '.test':
<style>
.test:last-child {
background-color:#88fe88;
}
.test:lang(en) {
color:blue;
}
</style>

<h4>Example lang and last-child</h4>
<p>The CSS style defined for <b>test: last-child</b> will be applied to the last LI that has class 'test'.<br>
The CSS rule added to <b>.test:lang(en)</b> is applied only to the element that has both: <em>class='test'</em> and <em>lang='en'</em> attributes.</p>

<ul>
 <li class='test'>HTML: https://coursesweb.net/html</li>
 <li class='test' lang='en'>CSS: https://coursesweb.net/css</li>
 <li class='test'>JavaScript: https://coursesweb.net/javascript</li>
</ul>
• Here is other example, where are combined a class (test), a type selector <em> tag and 'first-child'.
<style>
/* Applies to the first EM tag of every element with class='test' */
.test em:first-child {
font-weight: bold;
color: blue;
}
</style>

<p>A CSS style will be applied to first EM tag of every 'test' class.</p>

<p class='test'>Paragraph with three EM tags: <em>blue text</em>, a <em>second EM tag</em>, and another <em>em text</em>.</p>
<p class='test'>Another paragraph: <em>a bold-italic blue string</em>, and a second <em>em sub-string</em>.</p>

Pseudo-classes with ID and form elements

In the fallowing example is used the hover pseudo-class applied to an ID, and the focus pseudo-class to a class (test).
<style>
#idb:hover {
background-color:#12da34;
}
.test:focus {
background-color:#dadafe;
}
</style>

<h4>Example hover and focus</h4>
<p>When the mouse is over the button it changes its background color.<br>
When you click on the text areas of the form it changes their background color.</p>

<form action='' method='post'>
 <input type='text' class='test' /><br />
 <textarea cols='20' rows='5' class='test'></textarea><br />
 <input type='button' value='Button' id='idb' />
</form>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
What attribute makes an option from <select> selected?
checked="checked" selected="selected" disabled="disabled"
<select name="a_name">
 <option value="val1">Option 1</option>
 <option value="val2" selected="selected">Option 2</option>
</select>
What CSS value allows to create color gradients for background?
contain repeat-x linear-gradient
#id {
  background: linear-gradient(top left, #1f1, #fff, #11f);
}
What statement creates an array in JavaScript?
[] {} new Object()
var arr = [1, "CoursesWeb.net", "MarPlo.net"];
alert(arr[2]);
Indicate the PHP function used to redirect to other page.
function() header() switch()
header("Location: http://coursesweb.net/");
exit;
Pseudo-classes

Last accessed pages

  1. Draw arrow markers between clicks coords in Canvas (1806)
  2. Get and Modify content of an Iframe (25199)
  3. Detect when ScrollBar reaches the bottom of the page (3359)
  4. Add dynamically button to scroll to top of the page (866)
  5. addChild and removeChild (6416)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (32)
  2. SHA256 Encrypt hash in JavaScript (16)
  3. Get and Modify content of an Iframe (15)
  4. Create simple Website with PHP (13)
  5. SHA1 Encrypt data in JavaScript (12)