CSS Selectors 
Learn everything there is to know about CSS Selectors. In CSS selectors are patterns used to select the element(s) you want to style. Full pattern references below. Devsocial.net offers free online tutorials, references and free SEO Tools the world wide web design library.
Table of Contents:
| Selector | Example | Example description |
|---|---|---|
| .class | .intro | Selects all elements with class="intro" |
| .class1.class2 | .name1.name2 | Selects all elements with both name1 and name2 set within its class attribute |
| .class1 .class2 | .name1 .name2 | Selects all elements with name2 that is a descendant of an element with name1 |
| #id | #firstname | Selects the element with id="firstname" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element.class | p.intro | Selects all <p> elements with class="intro" |
| element,element | div, p | Selects all <div> elements and all <p> elements |
| element element | div p | Selects all <p> elements inside <div> elements |
| element>element | div > p | Selects all <p> elements where the parent is a <div> element |
| element+element | div + p | Selects the first <p> element that is placed immediately after <div> elements |
| element1~element2 | p ~ ul | Selects every <ul> element that is preceded by a <p> element |
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target="_blank"] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~="flower"] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang|="en"] | Selects all elements with a lang attribute value equal to "en" or starting with "en-" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |
| :active | a:active | Selects the active link |
| ::after | p::after | Insert something after the content of each <p> element |
| ::before | p::before | Insert something before the content of each <p> element |
| :checked | input:checked | Selects every checked <input> element |
| :default | input:default | Selects the default <input> element |
| :disabled | input:disabled | Selects every disabled <input> element |
| :empty | p:empty | Selects every <p> element that has no children (including text nodes) |
| :enabled | input:enabled | Selects every enabled <input> element |
| :first-child | p:first-child | Selects every <p> element that is the first child of its parent |
| ::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 |
| :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 which has focus |
| :fullscreen | :fullscreen | Selects the element that is in full-screen mode |
| :hover | a:hover | Selects links on mouse over |
| :in-range | input:in-range | Selects input elements with a value within a specified range |
| :indeterminate | input:indeterminate | Selects input elements that are in an indeterminate state |
| :invalid | input:invalid | Selects all input elements with an invalid value |
| :lang(language) | p:lang(it) | Selects every <p> element with a lang attribute equal to "it" (Italian) |
| :last-child | p:last-child | Selects every <p> element 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 |
| ::marker | ::marker | Selects the markers of list items |
| :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 |
| ::placeholder | input::placeholder | Selects input elements with the "placeholder" attribute specified |
| :read-only | input:read-only | Selects input elements with the "readonly" attribute specified |
| :read-write | input:read-write | Selects input elements with the "readonly" attribute NOT specified |
| :required | input:required | Selects input elements with the "required" attribute specified |
| :root | :root | Selects the document's root element |
| ::selection | ::selection | Selects the portion of an element that is selected by a user |
| :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 |
Rating:
Capable: 
Date Posted: 2/5/2023
Note: Make sure your page contains a valid doctype for this menu to render properly.
Revision History: Nov 8th, 2023': updated code..
Usage Terms: | Please Read - -> >
Viewed: 37,545
Share our library with others. Spread the love. Share: 
Was this article & Examples Helpful ?
If so you can help us bring this and more to become available for you at anytime. You can help us by donating any amount or Sharing & Following Us. Donate through PayPal.
More useful links:
Price: $3,500 
Free Tools
- Submit Software/Code
Sitemap Generator-
NameServer Lookup (NS) -
( SERP )Search Engine Ranking Position checker 
PHP Form Generator
Generate custom email forms.-
Domain (WHOIS) Lookup Check all domain information, exp date, owner,address. 
Meta Tags Generator Generate All meta tags and get ranked high on Search engines.. 
CPM Advertising Calculator Calculate and estimate your CPM / CPA / CPC.. 
CSS 3 Color Chart View all Known Colors and Their Css Atribute. Ex. #0099FF
FavIcon Generator Generate your own Favicon in seconds. Then Just Place the image.
Table Generator Generate
Tables just clicking the buttons
+ its Copy and Paste.
Dev's Tips
Dev: Ramon Sanchez
TIP: # 251 | Meta Tags
When addingMETA TAGSmake sure you dont over Repeat thekeywordsit wont help with SEO. Keep it Simple dont overdue it...
Contact Developer
Website Ranking Tools
- Help you analyze and improve your Website rankings!
Google Rank Checker Check website Google rank.- Website search engine position
Check website position on search. - Search Engine Optimization Tools - Check how search engines see your Website !
- Search Engine Listing Preview Preview what your site's listing will look like.
- Website Resolution Viewer - View your website at a variety of common resolutions.
- Text Website Viewer
View your website in text-only mode, just as the search engines see it. - XHTML Website Source Tools - Check how search engines see's and affect your Website !
Source Code Viewer
View the source code of a website.- MD5 Encrypter
Encrypt text with MD5 encoding. - HTML Encrypter Encrypt your HTML code to hide it from visitors.
- Website Speed Test Check the loading speed of your site.
- Website owner Lookup See the Domain information and who is it registered to.
- Optimize Html Code Optimize your HTML Source code.
- Other Misc Website Tools - Check how search engines see and affect your Website.
- Website Status analyzer Analyze whether all the five major ports are responding back.
- TXT List Cleaner Clean and remove duplicates from a text list.
Javascript Hit Counter Copy and paste Javascript code to your website and create a web counter.
Browser Details Tool - View your IP address and your browser details.- Send Anonymous Email's.Allows the sending of anonymous e-mails.
- E-mail Image Generator Create an image of your e-mail address to prevent harvesting.