Thomas Coper

Thomas Coper

1585722426

Ultimate Guide To CSS Pseudo-Classes for Beginners

In this article, you will be introduced to pseudo-elements in the cascading style sheets and practical examples of how they are used along with the compatibility.

What are pseudo-elements in CSS?

A CSS pseudo-element is a keyword added to a CSS selector that lets you style a specific part of the selected HTML element. In CSS3, they are usually denoted by two colons — for example, ::first-line — to differentiate them from pseudo-classes. In contrast, CSS2 syntax uses one colon (e.g., :first-line). I’ve indicated which pseudo-elements you can use with CSS2.

Pseudo-elements syntax

The general syntax for CSS pseudo-elements looks like this:


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

It looks just like normal styling statements but with the colons to indicate the specific part of the elements contained in the selector that you want to style.

Pseudo-elements in CSS

There are currently seven pseudo-elements in CSS. They are:

  1. ::after
  2. ::before
  3. ::first-letter
  4. ::first-line
  5. ::marker
  6. ::placeholder
  7. ::selection

There are others, but they are still considered experimental technology. So, in this post, the focus will be on the main seven pseudo-elements.

Working demo

In this post, you will be introduced to each of these pseudo-elements in a simple demo folder. To follow along you will need:

  • A code editor — I recommend Visual Studio Code

  • A live server to serve your HTML code. You can download one in VS Code. First, go to the extensions tab. You will see a search bar alongside a list of favorite extensions. Search for “live server” (it has almost 5 million downloads)

Now, create a folder, call it pseudo, and open it with VS Code. Create two files:

  • index.html: this is where our HTML code for content goes
  • main.css: this is where the styling will take place

Copy this starter code below into your index.html file:


<!DOCTYPE html>
<html lang=”en”>
 <head>
  <meta charset=”UTF-8">
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0">
  <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
  <title>Document</title>
  <link rel=”stylesheet” type=”text/css” href=”main.css”>
 </head>
 <body>
  <p>hello world!</p>
 </body>
</html>


The code in bold shows that we have linked the content to a stylesheet — in your case, main.css. Next, copy this test style into the main.css file to test it out:


p{
color: aqua;
}


If you click the Go Live button at the footer of the VS Code application, you will be redirected to your default browser, where a live remote server hosting the webpage has been fired up for you.

This is image title

The ::after creates a pseudo-element that represents the last child of a selected HTML element. It is used to add styling to this particular element in collaboration with the CSS content property. The syntax looks something like this:


selector::after {
  content: "value";
} 

Copy the code below into your index.html file:


<!DOCTYPE html>
<html lang=”en”>
 <head>
  <meta charset=”UTF-8">
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0">
  <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
  <title>Document</title>
  <link rel=”stylesheet” type=”text/css” href=”main.css”>
 </head>
 <body>
  <p class=”one”>This is my very first paragraph.
   This is my very first paragraph.
   This is my very first paragraph.
   This is my very first paragraph.</p>
  <p class=”three”>This is my second paragraph.</p>
  <p class=”two”>This is my last but not the least paragraph</p>
 </body>
</html>



Now, in your main.css file, copy the code below:


.one::after {
 content: “ — 1”;
 color: blue;
}
.two::after {
 content: “ — 2”;
 color: red;
}


This simply adds the strings before the selected elements — in this case, the class pointing to various paragraphs — and updates their colors, too.

::before (:before)

The ::before creates a pseudo-element that represents the first child of a selected HTML element. It is inline by default, and it is used to add styling to this particular element in collaboration with the CSS content property. The syntax looks something like this:


selector::before {
  content: "value";
}


Your index.html file will stay intact, but in your main.css file, copy the code below:



.one::before {
content: “1--”;
color: blue;
}
.two::before {
content: “2--”;
color: red;
}


This simply adds the strings before the selected elements — in this case, the class pointing to various paragraphs — and updates their colors, too.

::first-letter (:first-letter)

The ::first-letter creates a pseudo-element that represents the first letter of the first line of a block element as long it is not coming after an image or a table.


selector::first-letter {
  property: value;
}

It is, however, important to realize that the first letter of an element can be tricky to spot. Things like punctuations can be logically counted as first letters. Some languages have digraphs that are always capitalized together, like the IJ in Dutch. In these cases, both letters of the digraph should be matched by the ::first-letter pseudo-element.

The ::before pseudo-element in conjunction with the content property can create the first element, too, so keep these in mind while debugging your CSS.

Copy the styling code below in your main.css file to see the ::first-letter in action:


p::first-letter {
 color: red;
 font-size: 130%;
}


::first-line (:first-line)

The ::first-line creates a pseudo-element that represents the first line of a block element. Just like the first letter, the first line is also dependent on a few factors, like the width of the element, the width of the document, and the font size of the element. The syntax of the ::first-line pseudo-element looks like this:


selector::first-line {
  property: value;
}


Copy the styles below into your main.css file:


p {
font-size: 130%;
}
p::first-line {
color: red;
font-size: 130%;
}


The first paragraph style will enlarge the font of the paragraphs in order to get a line out of the given string.

This is image title

::marker

The ::marker pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It is used on list items and the summary element. The syntax looks like this:


selector ::marker {
  property: value;
}

Add this list items code below to your index.html file:


<ul>
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
</ul>

Copy the ::marker styles below to the main.css file to see it in action:


ul li::marker {
  color: blue;
  font-size: 130%;
}


::placeholder

The ::placeholder pseudo-element points to the placeholder of input elements in your presentation, mostly found in forms. Most browsers, by default,
apply a light gray color to placeholders. The syntax looks something like this:


selector ::placeholder {
  property: value;
}

Copy this input line into your index.html file:


<input placeholder="Type something here!">


Copy the styling below to the main.css file to see the changes:


input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}


::selection

The ::selection pseudo-element applies to highlighted elements on the DOM. This is one of my favorite pseudo-elements. The syntax looks like this:


selector ::selection {
  property: value;
}


There are a few properties that can be used on the ::selection pseudo-element: color, background-colo r, cursor, caret-color, outline, text-decoration, text-emphasis-color, and text-shadow.

Copy the styling below into your main.css file:


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


If you check it out in your browser, it will look like this:

This is image title

Browser compatibility

Here is some useful information you might want to know about the pseudo-elements in regards to browser support:

  • Every popular browser except Safari and Opera fully support the ::after pseudo-element

  • Every popular browser except Safari, Internet Explorer 9, and Opera fully support the ::before pseudo-element

  • The ::marker pseudo-element is supported only by Firefox

  • The ::first-letter pseudo-element is supported by all browsers except Safari on iOS devices

  • The ::first-line pseudo-element is fully supported by every browser on every screen size

  • The ::placeholder pseudo-element is supported in all browsers except Internet Explorer

  • The ::selection pseudo-element is supported by all web browsers

Conclusion

CSS is still an integral part of the modern web development process. It is vital that web developers take some time to learn the basics of CSS. Pseudo-elements in CSS will help you extend your knowledge and give you more exciting options for your styling. Happy hacking!

Learn More

#css #html

What is GEEK

Buddha Community

Ultimate Guide To CSS Pseudo-Classes for Beginners
Lawrence  Lesch

Lawrence Lesch

1662107520

Superdom: Better and Simpler ES6 DOM Manipulation

Superdom

You have dom. It has all the DOM virtually within it. Use that power:

// Fetch all the page links
let links = dom.a.href;

// Links open in a new tab
dom.a.target = '_blank';

Only for modern browsers

Getting started

Simply use the CDN via unpkg.com:

<script src="https://unpkg.com/superdom@1"></script>

Or use npm or bower:

npm|bower install superdom --save

Select

It always returns an array with the matched elements. Get all the elements that match the selector:

// Simple element selector into an array
let allLinks = dom.a;

// Loop straight on the selection
dom.a.forEach(link => { ... });

// Combined selector
let importantLinks = dom['a.important'];

There are also some predetermined elements, such as id, class and attr:

// Select HTML Elements by id:
let main = dom.id.main;

// by class:
let buttons = dom.class.button;

// or by attribute:
let targeted = dom.attr.target;
let targeted = dom.attr['target="_blank"'];

Generate

Use it as a function or a tagged template literal to generate DOM fragments:

// Not a typo; tagged template literals
let link = dom`<a href="https://google.com/">Google</a>`;

// It is the same as
let link = dom('<a href="https://google.com/">Google</a>');

Delete elements

Delete a piece of the DOM

// Delete all of the elements with the class .google
delete dom.class.google;   // Is this an ad-block rule?

Attributes

You can easily manipulate attributes right from the dom node. There are some aliases that share the syntax of the attributes such as html and text (aliases for innerHTML and textContent). There are others that travel through the dom such as parent (alias for parentNode) and children. Finally, class behaves differently as explained below.

Get attributes

The fetching will always return an array with the element for each of the matched nodes (or undefined if not there):

// Retrieve all the urls from the page
let urls = dom.a.href;     // #attr-list
  // ['https://google.com', 'https://facebook.com/', ...]

// Get an array of the h2 contents (alias of innerHTML)
let h2s = dom.h2.html;     // #attr-alias
  // ['Level 2 header', 'Another level 2 header', ...]

// Get whether any of the attributes has the value "_blank"
let hasBlank = dom.class.cta.target._blank;    // #attr-value
  // true/false

You also use these:

  • html (alias of innerHTML): retrieve a list of the htmls
  • text (alias of textContent): retrieve a list of the htmls
  • parent (alias of parentNode): travel up one level
  • children: travel down one level

Set attributes

// Set target="_blank" to all links
dom.a.target = '_blank';     // #attr-set
dom.class.tableofcontents.html = `
  <ul class="tableofcontents">
    ${dom.h2.map(h2 => `
      <li>
        <a href="#${h2.id}">
          ${h2.innerHTML}
        </a>
      </li>
    `).join('')}
  </ul>
`;

Remove an attribute

To delete an attribute use the delete keyword:

// Remove all urls from the page
delete dom.a.href;

// Remove all ids
delete dom.a.id;

Classes

It provides an easy way to manipulate the classes.

Get classes

To retrieve whether a particular class is present or not:

// Get an array with true/false for a single class
let isTest = dom.a.class.test;     // #class-one

For a general method to retrieve all classes you can do:

// Get a list of the classes of each matched element
let arrays = dom.a.class;     // #class-arrays
  // [['important'], ['button', 'cta'], ...]

// If you want a plain list with all of the classes:
let flatten = dom.a.class._flat;     // #class-flat
  // ['important', 'button', 'cta', ...]

// And if you just want an string with space-separated classes:
let text = dom.a.class._text;     // #class-text
  // 'important button cta ...'

Add a class

// Add the class 'test' (different ways)
dom.a.class.test = true;    // #class-make-true
dom.a.class = 'test';       // #class-push

Remove a class

// Remove the class 'test'
dom.a.class.test = false;    // #class-make-false

Manipulate

Did we say it returns a simple array?

dom.a.forEach(link => link.innerHTML = 'I am a link');

But what an interesting array it is; indeed we are also proxy'ing it so you can manipulate its sub-elements straight from the selector:

// Replace all of the link's html with 'I am a link'
dom.a.html = 'I am a link';

Of course we might want to manipulate them dynamically depending on the current value. Just pass it a function:

// Append ' ^_^' to all of the links in the page
dom.a.html = html => html + ' ^_^';

// Same as this:
dom.a.forEach(link => link.innerHTML = link.innerHTML + ' ^_^');

Note: this won't work dom.a.html += ' ^_^'; for more than 1 match (for reasons)

Or get into genetics to manipulate the attributes:

dom.a.attr.target = '_blank';

// Only to external sites:
let isOwnPage = el => /^https?\:\/\/mypage\.com/.test(el.getAttribute('href'));
dom.a.attr.target = (prev, i, element) => isOwnPage(element) ? '' : '_blank';

Events

You can also handle and trigger events:

// Handle click events for all <a>
dom.a.on.click = e => ...;

// Trigger click event for all <a>
dom.a.trigger.click;

Testing

We are using Jest as a Grunt task for testing. Install Jest and run in the terminal:

grunt watch

Download Details:

Author: franciscop
Source Code: https://github.com/franciscop/superdom 
License: MIT license

#javascript #es6 #dom 

Trace  Hoeger

Trace Hoeger

1618562940

3 Examples of Pseudo-Classes for CSS Beginners

This post is geared towards beginners with CSS. The goal of this short article is to introduce CSS pseudo-class selectors by giving 3 demonstrations of how a few different ones could be implemented.

There are many pseudo-class selectors, check the docs out here which lists them all. This post will cover a few which I find to be useful and easy to implement for beginners, and also help to give your app a slightly better UX/UI.

#css #beginner #web-development #pseudo-class #software-engineering

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Yashi Tyagi

1617449307

CA Classes - Best CA Classes Online

Chartered Accountancy course requires mental focus & discipline, coaching for CA Foundation, CA Inter and CA Finals are omnipresent, and some of the best faculty’s classes have moved online, in this blog, we are going to give the best way to find online videos lectures, various online websites provide the CA lectures, Smartnstudy one of the best site to CA preparation, here all faculty’s video lecture available.

check here : ca classes

#ca classes online #ca classes in delhi #ca classes app #ca pendrive classes #ca google drive classes #best ca classes online

Alayna  Rippin

Alayna Rippin

1603188000

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics