In this artical we define differntes types of selector see as above-
Selector-CSS type selectors match elements by node name. Selector for a particular node name selects all elements of that type — that is, with that node name — in the document. andwe can define a selector is element which on we apply css propeties. like example
Selector element { Define properties }
</style>
p{
background-color:blue;color:white;
}
</style>
In this tutorial we define selector like in example see.
What is Selector?
Selector-CSS type selectors match elements by node name. Selector for a particular node name selects all elements of that type — that is, with that node name — in the document. andwe can define a selector is element which on we apply css propeties. like example
Syntex
<style type="text/css">>Selector element { Define properties }
</style>
Example-
<style type="text/css">>p{
background-color:blue;color:white;
}
</style>
In this tutorial we define selector like in example see.
| Selector | Description | Example |
|---|---|---|
| div | Define div and write css.Select all <div> element |
div { padding:3px; } |
| p | Define p element and write css.Select all <p> element |
p { padding:3px; } |
| h1 | Define h1 element and write css.Select all <h1> element.Basically we use heading style 1,h2,h3,h4,h5,h6.Maintain this order like- h1>h2>h3>h4>h5>h6 In this h1 is very large size of font and text and h6 is very small. |
h1 { color:red; } |
| .class | Define class with .(dot)symbol and apply css class and access class name with .(ClassName) | .name { padding:3px; color:blue; } |
| .Id | Define class with # symbol and apply css class and access class name with #(ClassName) | #name { padding:3px; color:blue; } |
| * | * (Use this symbol select all element only use * effected all element) | .name { padding:3px; color:blue; } |
| div, p | Selects all <div> elements and all <p> elements.Apply css propert effected all elements of both<div>& <p> | div,p { padding:3px; color:blue; } |
| div p | Selects all elements inside <div> elements.Apply css property effected all elements of both <div>& <p> |
div p { padding:3px; color:blue; } |
| div > p | Selects all <p> elements where the parent is a <div> element where effected css properties | div > p { padding:3px; color:blue; } |
| div + p | Selects all <p> elements that are placed immediately after <div> elements. Whereis effected css properties | div > p { padding:3px; color:blue; } |
| [title~=fruit] | Selects all elements with a title attribute containing the word "fruit" where apply css properties which is declared | [title~=fruit]{ padding:3px; color:blue; } |
| p~ul | Selects every <ul> element that are preceded by a <p> element. | p~ul{ padding:3px; color:blue; } |
| a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" | a[href^="https"]{ padding:3px; color:blue; } |
| a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" | a[href$=".pdf"]{ padding:3px; color:blue; } |
| a:active | Selects the active link of a tag and easly apply css property | a:active{ padding:3px; color:blue; } |
| p::after | Insert something after the content of each <p> element and we can easly write css property | p::after{ padding:3px; color:blue; } |
| p::before | Insert something before the content of each <p> element | p::before{ padding:3px; color:blue; } |
| input:checked | Selects every checked <input> element | input:checked{ padding:3px; color:blue; } |
| input:disabled | Selects every disabled <input> element | input:disabled{ padding:3px; color:blue; } |
| p:empty | Selects every <p> element that has no children (including text nodes) | p:empty{ padding:3px; color:blue; } |
| input:enabled | Selects every enabled <input> element | input:enabled{ padding:3px; color:blue; } |
| p:first-child | Selects every <p> element that is the first child of its parent | p:first-child{ padding:3px; color:blue; } |
| p::first-letter | Selects the first letter of every <p> element.You can apply css properties and effected only first letter of every <p>elements. | p::first-letter{ padding:3px; color:blue; } |
| p::first-letter | Selects every <p> element that is the first child of its parent | p:first-child{ padding:3px; color:blue; } |
| p::first-line | Selects the first line of every <p> element.You can appy css property and effected on <p>tag first line. | p::first-line{ padding:3px; color:blue; } |
| p:last-child | Selects every <p> element that is the last child of its parent.You can appy css property and effected. | p:last-child{ padding:3px; color:blue; } |
| a:hover | Selects links on mouse over.You can give css property easly | a:hover{ padding:3px; color:blue; } |
| input:focus | Selects the input element which has focus.You can apply css style easly want focus then. | input:focus{ padding:3px; color:blue; } |
| input:invalid | Selects all input elements with an invalid value. | input:invalid{ padding:3px; color:blue; } |
| a:link | Selects all unvisited links. | a:link{ padding:3px; color:blue; } |
| :not(p) | Selects every element that is not include <p> element | :not(p){ padding:3px; color:blue; } |
