What are Pseudo-Elements and pseudo-class?

Answer 1

In css you can have something like p:hover{
}
Here hover is a pseudo class. It encodes the state of the element
p::first-line{}
Here first-line is a pseudo element. it is used to select a specific part of an element

Answer 2

PSEUDO CLASS::
A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it. Style visited and unvisited links differently. Style an element when it gets focus.
PSEUDO ELEMENTS::
Pseudo-elements are very much like pseudo-classes, but they have differences. They are keywords, this time preceded by two colons (::), that can be added to the end of selectors to select a certain part of an element.
🏁🏁🏁🏁🏁🏁🏁🏁🏁🏁
CHECK HERE VERY CLEAR && NICE EXPLANATION HERE:::
1.)https://www.w3schools.com/css/css_pseudo_elements.asp
2.)http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html
3.)https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line
4.)http://www.growingwiththeweb.com/2012/08/pseudo-classes-vs-pseudo-elements.html
5.)https://stackoverflow.com/questions/8069973/what-is-the-difference-between-a-pseudo-class-and-a-pseudo-element-in-css
6.)https://www.tutorialspoint.com/css/css_pseudo_elements.htm
THANKS @ROYAL BB ☺

Answer 3

pseudo element....
I think i should say it is a keyword added to a selector in css that lets you style a specific part of an html page. For example, ::first-line can be used to change the font of the first line of a paragraph. and so on
hope am making some senses.....

Answer 4

actually simply saying .....
pseudo elements are elements which is actually not available ....
its a false element which is on page but it isn't....
in reality ....[ you can consider it as a ghost ]
i hope you got it....😅

Answer 5

Psuedo Classes allow you to address an elements state.
Psuedo elements allow to address it's parents , siblings and children.
So what can you do with these if you are a CSS guru.
Have a look at single div
https://a.singlediv.com/

Answer 6

Pseudo elements.....are like a family.
If you continue to search on the web or Sololearn or (duh, why didn't I mention it before or you might even know it ☺️) Sololearn CSS course you might get to know more about them.

Answer 7

A pseudo-class is a selector that assists in the selection of something that cannot be expressed by a simple selector, forexample :hover, :link, :visited, :active, :focus. A pseudo-element however allows us to create items that do not normally exist in the document tree, for example ::after, ::before, ::first-letter, ::first-line. Pseudo-classes select regular elements but under certain conditions, like when their position relative to siblings or when they’re under a particular state.
Pseudo-elements effectively create new elements that are not specified in the markup of the document and can be manipulated much like a regular element. This introduces huge benefits for creating cool effects with minimal markup, also aiding significantly in keeping the presentation of the document out of the HTML and in CSS where it belongs.

Answer 8

psuedo elements are not really html elements but they are created and inserted at runtime. Since they are psuedo, you can not target them with javascript or jquery.

Answer 9

In addition to visiting Wenting Zhang's CSS video and website, perhaps this code will be interesting.
It's one div + its pseudo elements, animated into position so you can get a sense how each element is used to construct a rotating yin-yang symbol:
https://code.sololearn.com/WLZFqkui99gM/?ref=app

Answer 10

Pseudo classes have a colon before them, whereas pseudo elements have 2 before them.

Answer 11

For an excellent tutorial on pseudo elements and how they can be used, watch this YouTube video to make a wiggling mustache in ~7 minutes:
"dotCSS 2016 - Wenting Zhang - Make CSS your secret super drawing tool" (16:51)
https://www.youtube.com/watch?v=Y0_FMCji3iE
Then visit her website, where she has published over FIVE HUNDRED complex icons using just ONE CSS element and its 'pseudo" elements to complete shapes.
http://cssicon.space/ (website demo in video around 13 minutes)
You can see how each icon is constructed by hovering over the various parts (tap a CSS section if on mobile), try the code on CodePen, and even animate between any two icons using the "Animate" panel.

Answer 12

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements

Answer 13

Pseudo Classes:-
When we want to change the style of a webpage on the basis of activity of user.
For instance changing the color of a button when cursor is hovered over it.
Pseudo Elements:-
These are used to style specific parts of an element.
For example, inserting content before or after the content of the element, or styling the first letter of an element.

Answer 14

CHIEF JV That shortURL is designed to generate advertising revenue for its owners, doesn't work, crashes proxy sessions, shows popups and redirects to trading sites.
* This is not the place to exploit ad impressions. Don't post one of those again.
On the off-chance your mobile posted on your behalf, you should scan for malware.