CSS: Pseudo Classes & Elements

-

 

Pseudo Classes & Elements

I. What are Pseudo-classes?

They are keywords that we can use in CSS to target elements in a particular state.

For example:

  • :hover - when we hover over an element
  • :focus - when a field is in focus
  • :first-child - when an element is the first child of a parent element

We use pseudo-classes by adding them to the end of our selector.

Syntax:

selector:pseudo-class {
  property: value;
}

II.Pseudo-classes examples

We can display links in different ways:

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: gray;
}

/* mouse over link */
a:hover {
  color: yellow;
  text-decoration: underline;
}

/* selected link */
a:active {
  color: blue;
}

2. :focus Pseudo-class

With :focus Pseudo-class, we can style an element when it’s focused.

For example, we change the border of input when it’s focused.

form input:focus {
  border: 4px dashed gray;
}

3. :valid Pseudo-class

We can also change the style of input when it’s valid.

For example, when a user types in a valid email, the border’s color changes to blue.

form input:valid {
  border: 4px solid blue;
}

4. :first-child Pseudo-class

The :first-child Pseudo-class can target the child of a parent element when it’s the first child inside the parent element.

<ul>
  <li>Milk</li>
  <li>Butter</li>
  <li>Cheese</li>
</ul>

ul li:first-child {
  border: 2px solid red;
}

III. What are Pseudo-elements?

Pseudo Elements allow us to inject dynamic content or style the content inside an element.

Syntax

The syntax of pseudo-elements:

selector::pseudo-element {
  property: value;
}

List of Pseudo Elements:

  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::selection

1. ::first-letter pseudo-element

The ::first-letter can add style to the first letter of a text.

p::first-letter {
  color: red;
  font-size: 30px;
}

2. ::first-line pseudo-element

::first-line adds a special style to the first line of a paragraph.

p::first-line {
  font-weight: bold;
  font-size: 1.2em;
}

3. ::before pseudo-element

::before pseudo-element can insert some content before the content of an element.

p::before {
  content: url(smiley.gif);
}

4. ::after pseudo-element

::after can insert content after the content of an element.

p::after {
  content: "...";
}

5. ::selection pseudo-element

We can change the style of something when it’s selected with ::selection

p::selection {
  background-color: red;
  color: white;
}

Comments

Post a Comment

Popular posts from this blog

JavaScript: How to create an array of unique values using Set?

-
  How to create an array of unique values using Set? ES6 introduces Set, which returns unique values This article will go through how to remove duplicates and create an array of unique values ES6 Set. What is ES6 Set? The Set object is a data type that can store unique values without any particular order. We can pass in a parameter, and all of its elements will be added to the new Set. const result = new Set (parameter); How to create an array with unique values? For example, we want to create a new array with unique category values. const food = [ { name : "egg" , category : "breakfast" , }, { name : "burger" , category : "lunch" , }, { name : "steak" , category : "dinner" , }, { name : "chicken" , category : "lunch" , }, { name : "eggs" , category : "breakfast" , }, { name : "spaghetti" , category : ...
Read more

JavaScript: Constructor Function in Objects

-
  Constructor Function In this article, we will learn the constructor function and its usage. I. What is the constructor function? A constructor function is a function to create an object. II. How to create a constructor function? When we create a constructor function, we should capitalize the function’s name. Then, we pass in the properties we want to set in the parameters. We use the keyword  this  to set them as the object’s properties. Avoid using  arrow functions  when using  this  in a method. function Person ( name, birthDay, color ) { this .name = name; this .birthDay = new Date (birthDay); this .color = color; } III. Create an object instance Once we have an object constructor, we use the  new  keyword to create new objects of the same type. const p 1 = new Person( "Anna" , "3-25-1995" , "green" ); const p 2 = new Person( "Joe" , "10-12-1990" , "blue" ); console .log(p 1 ); // Person {name: "Anna...
Read more

JavaScript: Basics

-
  Basics I. Syntax 1. semi-colons; In Javascript, every expression needs a semi-colon at the end. An expression is a line of code that returns a value. Statements that are not expressions don’t need semi-colons. // variable is an expression. const x = 2 ; // function is a statement. function hello ( ) {} if (x > 1 ) { // if is statement console .log( "Hello World" ); // console.log is expression } 2. { curly braces } Curly braces identify JS objects and code blocks such as functions, conditional statements, and loops. // function function hello ( ) {} // if if (condition) { // code... } // loop for (condition) { // code... } // JS object const obj = { key : "value" } 3. console.log The console is a panel that displays important messages. Data can be printed or logged to the console with  console.log() . > console.log ( 'hello' ) hello 4. Comments Comments can explain the purposes, leave instructions for other develo...
Read more