css pseudo element properties
- Web html5, css3, javascript, php, sql, jquery, xml, ajax, web design & development, photo maker, SEO.
- Online web design, along with everything you need for a complete website.
- css pseudo element properties tutorial.
What are Pseudo-element; A CSS pseudo-element is used to style specified parts of an element.
pseudo element
example
#demo::first-letter {
color: #008000;
font-size: xx-large;
}
#demo::first-line {
color: #c00;
font-variant: small-caps;
}
All CSS Pseudo Classes
| Selector | Example | Example description |
|---|---|---|
| active | a:active | Selects the active link |
| checked | input:checked | Selects every checked <input> element |
| disabled | input:disabled | Selects every disabled <input> element |
| empty | p:empty | Selects every <p> element that has no children |
| enabled | input:enabled | Selects every enabled <input> element |
| first-child | p:first-child | Selects every <p> elements that is the first child of its parent |
| first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element of its parent |
| focus | input:focus | Selects the <input> element that has focus |
| hover | a:hover | Selects links on mouse over |
| in-range | input:in-range | Selects <input> elements with a value within a specified range |
| invalid | input:invalid | Selects all <input> elements with an invalid value |
| lang(language) | p:lang(it) | Selects every <p> element with a lang attribute value starting with "it" |
| last-child | p:last-child | Selects every <p> elements that is the last child of its parent |
| last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent |
| link | a:link | Selects all unvisited links |
| not(selector) | :not(p) | Selects every element that is not a <p> element |
| nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent |
| nth-last-child(n) | p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child |
| nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every <p> element that is the second <p> element of its parent, counting from the last child |
| nth-of-type(n) | p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent |
| only-of-type | p:only-of-type | Selects every <p> element that is the only <p> element of its parent |
| only-child | p:only-child | Selects every <p> element that is the only child of its parent |
| optional | input:optional | Selects <input> elements with no "required" attribute |
| out-of-range | input:out-of-range | Selects <input> elements with a value outside a specified range |
| read-only | input:read-only | Selects <input> elements with a "readonly" attribute specified |
| read-write | input:read-write | Selects <input> elements with no "readonly" attribute |
| required | input:required | Selects <input> elements with a "required" attribute specified |
| root | root | Selects the document's root element |
| target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
| valid | input:valid | Selects all <input> elements with a valid value |
| visited | a:visited | Selects all visited links |
All CSS Pseudo Elements
| Selector | Example | Example description |
|---|---|---|
| after | p::after | Insert content after every <p> element |
| before | p::before | Insert content before every <p> element |
| first-letter | p::first-letter | Selects the first letter of every <p> element |
| first-line | p::first-line | Selects the first line of every <p> element |
| selection | p::selection | Selects the portion of an element that is selected by a user |
All Basic HTML5
HTML is the main markup language for web pages, and its elements are the basic building blocks of web pages. HTML is written in the form of HTML elements consisting of tags enclosed in "greater than" and "less than" symbols within the content of the web page.
All Basic CSS3
CSS (Cascading Style Sheets) is a computer language that belongs to the category of style sheet languages used to control the appearance of a document written in a markup language.It is used to control the appearance of a document written in HTML and XHTML, that is, to control the appearance of a web page and a website in general.
js JAVASCRIPT
Javascript is a set of computer software and specifications developed by James Gosling at Sun Microsystems, later acquired by Oracle Corporation, which provides a system for developing application software and its development in a multi-platform computing environment.
CREATIONS
In this chapter I call creation I will present you creations html, css and javascript that are very useful and creative in a web site. You can get them ready-made with Netbax creations or create them yourself as you wish with the help provided by the Netbax editor.
NAVIGATION Bar
having easy-to-use horizontal & vertical menu is important for any web site. with css you can transform boring html menus into good-looking horizontal & vertical bars. horizontal & vertical menu is such an important part of your website. it’s how your visitors navigate to the main areas of your site and makes it easy for them to find.
WEB BUTTONS
Collection of hand-picked free HTML and CSS button code examples.In this article, we'll see some really cool looking responsive buttons using only a few lines of CSS.You are free to copy, modify and use this code as you wish.All the buttons shown here can scale accordingly to the font-size attribute, and should work in any relatively recent browser.