All Css | css3 Selectors

To apply css on elements there are different ways to select an element. The most uses way is class or id of element. But there are many selectors available by which an element can be selected and we can apply css to that element.


List of all css selectors

Selectors Example Description
* * Select all the elements
.ClassName .test{
Color:red;
}
This is the most common selector used in css in this select all the elements with the class name test.
#idofElelment #test{
Color:red;
}
Element selects with the id test
Element div{
Color:red;
}
Select all the div on the page.
Element , Element, Div,span{
Color:red;
}
Select all the div and span element on the page
Element Element Div span{
Color:red;
}
Select all the span elements inside div elements on the page.
Element> Element Div > span{
Color:red;
}
Select only child span element of div. Means it will only select span element that are direct child of div. as in the example show it will select only first span because it is direct child of div
Element+ Element Div+span{
Color:red;
}
Select all span elements that will come immediately after div element.
[attribute] [title]{
Color:red;
}
Select all the elements with title attribute.
[attribute=value] [title=abc]{
}
Select all the elements having title=”abc”
[attribute~=value] [title~=abc]{
}
Select all the elements having word abc in title
[attribute|=value] [title|=ab]{
}
Select all the elements whose title is starting with ab
:link a : link{
}
Select all the unvisited link
:visited a : visited {
}
Select all the visited link
:active a : active {
}
Select all the active link
:hover Div:hover{
}
Select the element on mouseover it
:focus input:focus{
}
Select the element when element has focus
:first-letter Span:first-letter{
}
Select the first letter of every span element on page.
:first-line Span:first- line {
}
Select the first line of every span element on page.
:first-child Span:first- child {
}
Select all span elements on page which are the first child of its parent.
:before Span: before {
content:”this is test ";
}
Before is use to add some content. It will add “this is test” before every span element on the page.
:after Span: after {
content:”this is test ";
}
After is use to add some content. It will add “this is test” after every span element on the page.

These all are the css 1 and css2 selectors. Now following is the list of css3 selectors


Selectors Example Description
element1~element2 Div~span Select all the span elements that will come after the div element.
[attribute^=value] div[title^="main"] Select all div elements whose title starts with main .
[attribute$=value] div[title$="main"] Select all div elements whose title value ends with main .
[attribute*=value] div[title*="main"] Select all div elements whose title contains main.
:first-of-type Span::first-of-type Select every span element that is the first child of its parent
:last-of-type Span: last-of-type Select every span element that is the last child of its parent
:only-of-type Span: only-of-type Select all the span elements that is the only element of its parent. Means if the div have two child span then they will not be selected but if the div has one child span then it will be selected. Means there can be other child elements but the span should be one.
:only-child Span :only-child Select every the span element that is the only child of its parent. Means if the parent has only one child and that should be span.
:nth-child(n) span:nth-child(3) Select every span element that is the third child of their parent.
:nth-last-child(n) span :nth-last-child (3) Select every span element that is the third child of its parent but in this child is count from last child. Mean select the third last child span of its parent.
:nth-of-type(n) span:nth-of-type(3) Select every span element that is the third span element of its parent.
:nth-last-of-type(n) span: last-of-type(3) Select every span element that is third span element from its parent. But in this counting is start from last child. Means select last third span of its parent.
:last-child Span: last-child Select every span element that is the last child of its parent.
:root :root Select the root of the document.
:empty div :empty Select every div that has no children.
:target .test:target Select the current active link element in the element that has test class.
:enabled Input: enabled Select all enabled input elements on the page
:disabled input :disabled Select all the disabled input elements on the page.
:checked input :checked Select all the checked input elements on the page.
:not(selector) :not(span) Select all the elements on the page except span.
::selection ::selection Select the area that is selected by use.




No comments:

Post a Comment

IF you have any suggestions or any article then write in comments we will contact you.