With the introduction of CSS 3 many new selectors have been added to the CSS. We have already discussed selectors in CSS in following post:
CSS Selectors, CSS Link Styling, Pseudo Elements and Pseudo Classes.
In this type the style is applied to all the element's that are present after the element1. This is type of element selector.
Example:
This is attribute selector. This element selects the elements with attribute value starting with specific sub-string.
Example:
Above style will be applied to all the div elements which has id attribute that begins with "test".
This is attribute selector. This element selects the elements with attribute value ending with specific sub-string.
Example:
Above style will be applied to all the Anchor <a> elements which has href attribute that ending with ".html".
This is attribute selector. This element selects the elements with attribute value having specific sub-string.
Example:
Output :
Get your potbellied pig to mate
Above style will be applied to all the div elements which has class attribute with value that contains sub-string "test".
:nth-child(an+b) : The formula acts as a counter and style is applied to every element after specific intervals. n starts with 0. The 'a' and 'b' are two positive integers, values of both must be greater than equal to 0. We can use Addition and Subtraction operation in the formula.
This will apply style to nth element of its parent having n-1 element before it. It can have values as numbers, formula or keyword.
For syntax you can look at the :nth-child(n).
The major difference between nth-child and nth-of-type is that, the nth-child(3) will select the third child of its parent. Where as the nth-of-type(3) will select the third element a particular type of its parent.
This will apply style to nth element of its parent having n-1 element after it. It can have values as numbers, formula or keyword.
For syntax you can look at the :nth-last-child(n).
This is a "Structural Pseudo Element". This will select first child element same as type of its parent.
Example:
Following code will select the first div element.
This is a "Structural Pseudo Element". This will select the only element of its type, of its parent.
Example:
Following code will select the only span element.
span:only-of-type{
border: 0px;
background-color: red;
}
This is a "Structural Pseudo Element". This will select the only element of its parent.
Example:
Following code will select the only span element.
span:only-child{
border: 0px;
background-color: red;
}
This is a "Structural Pseudo Element". This will select last child element of its parent.
Example:
Following code will select the last div element.
div:last-of-type{
border: 0px;
background-color: red;
}
This will apply style to all the empty elements. These elements should be empty it should not contain text nodes.
CSS Selectors, CSS Link Styling, Pseudo Elements and Pseudo Classes.
CSS 3 Selectors
1. Element1 ~ Element2
In this type the style is applied to all the element's that are present after the element1. This is type of element selector.
Example:
div ~ table{
border: 0px;
background-color: red;
background-color: red;
}
The above example will apply style to all the table elements present after div element in the document.
2. Element [Attribute^="value"]
Example:
div [id^="test"]{
background-color: blue;
}
Above style will be applied to all the div elements which has id attribute that begins with "test".
3. Element [Attribute$="value"]
Example:
a [href$=".html"]{
background-color: blue;
}
Above style will be applied to all the Anchor <a> elements which has href attribute that ending with ".html".
4. Element [Attribute*="value"]
Example:
div [class*="test"]{
background-color: blue;
}
Output :
Get your potbellied pig to mate
Above style will be applied to all the div elements which has class attribute with value that contains sub-string "test".
5. :root
This is a "Structural Pseudo Element". The ":root" pseudo element applies style to the root element of the document. In html documents root element is always <html>.
Example:
:root{
background-color: blue;
}
6. :nth-child(n)
This is a "Structural Pseudo Element". The ":nth-child(n)" pseudo element applies style to the "nth" element of its parent. Where as n mentioned in the syntax can be a "number", or a "formula" or "Keywords(even, odd)".
:nth-child(n) : This will select the nth element of its parent.
:nth-child(an+b) : The formula acts as a counter and style is applied to every element after specific intervals. n starts with 0. The 'a' and 'b' are two positive integers, values of both must be greater than equal to 0. We can use Addition and Subtraction operation in the formula.
:nth-child(even) : This will apply style to all the even elements to apply style.
:nth-child(odd) : This will apply style to all the odd elements to apply style.
Example:
div:nth-child(1) : This will select the first element of its parent.
div:nth-child(2n+1) : The "2n+1" formula will select the elements starting from 1st element(n=0), (n=1) 3rd element, (n=2) 5th element and so on.
p:nth-child(even) : This will apply style to all the even para tags.
p:nth-child(odd) : This will apply style to all the odd para tags.
7. :nth-last-child(n)
It is similar to the ":nth-child" except it will select child elements from end of parent. It also uses numbers, formula and keywords.
:nth-last-child(n) : This will select the nth element of its parent.
:nth-last-child(an+b) : The formula acts as a counter and style is applied to every element after specific intervals. n starts with 0. The 'a' and 'b' are two positive integers, values of both must be greater than equal to 0. We can use Addition and Subtraction operation in the formula.
:nth-last-child(even) : This will apply style to all the even elements to apply style.
:nth-last-child(odd) : This will apply style to all the odd elements to apply style.
8. :nth-of-type(n)
This will apply style to nth element of its parent having n-1 element before it. It can have values as numbers, formula or keyword.
For syntax you can look at the :nth-child(n).
The major difference between nth-child and nth-of-type is that, the nth-child(3) will select the third child of its parent. Where as the nth-of-type(3) will select the third element a particular type of its parent.
9. :nth-last-of-type(n)
This will apply style to nth element of its parent having n-1 element after it. It can have values as numbers, formula or keyword.
For syntax you can look at the :nth-last-child(n).
10. :first-of-type
This is a "Structural Pseudo Element". This will select first child element same as type of its parent.
It will similar to :nth-of-type(n), except it will select only first element.
Example:
Following code will select the first div element.
div:first-of-type{
border: 0px;
background-color: red;
background-color: red;
}
11. :last-of-type
This is a "Structural Pseudo Element". This will select last child element same as type as its parent.
It will similar to :nth-last-of-type(n), except it will select only last element.
12. :only-of-type
This is a "Structural Pseudo Element". This will select the only element of its type, of its parent.
Example:
Following code will select the only span element.
span:only-of-type{
border: 0px;
background-color: red;
}
13. :only-child
This is a "Structural Pseudo Element". This will select the only element of its parent.
Example:
Following code will select the only span element.
span:only-child{
border: 0px;
background-color: red;
}
14. :only-child
This is a "Structural Pseudo Element". This will select last child element of its parent.
Example:
Following code will select the last div element.
div:last-of-type{
border: 0px;
background-color: red;
}
15. :empty
This will apply style to all the empty elements. These elements should be empty it should not contain text nodes.
No comments:
Post a Comment