So far we got to know about some of selectors like Attribute Selectors, Structural pseudo-class Selectors etc. which are beneficial to select certain elements. They matches sub string in the value of attributes. Here, we are going to discuss few more selectors which will give all most complete touch of CSS Selectors.
Lets have a look on these selectors.
Universal selector *{}:
*{
margin: 0;
padding: 0;
}
This selector is used to target each and every element of the page. Some developers use it to give zero out the margins and padding. Though sometime it becomes beneficial but I would not prefer to use this selector in our code because it adds much weight on the browser. Universal selector is also used to select child elements.
Compatibility- IE6+, FF, Chrome, Safari, Opera
Type selector X{}:
a{
color:blue;
}
When you want to target all the elements of the page, according to their type, rather than id or class name, then type selectors are used.
Compatibility- IE6+, FF, Chrome, Safari, Opera
Class selectors .X{}:
.xyz
{
color:blue;
}
In UI development Class selector helps us to target all the element, identified by the same class name through which we can apply the formatting to a group of elements.
Compatibility- IE6+, FF, Chrome, Safari, Opera
ID selectors #E{}:
#xyz
{
color:blue;
}
ID selector is best-known for giving a unique identity within the page. The main difference between class and id selectors is that you can target multiple elements with a single class.
Compatibility- IE6+, FF, Chrome, Safari, Opera
Descendant combinator X Y{}:
li a
{
color:blue;
}
This selector is used when we want to target specific element. For example - What if, instead of targeting anchor tag for the entire web page, we select only that anchor tag which comes after the < li > ? In that case we use descendant selectors.
Compatibility- IE6+, FF, Chrome, Safari, Opera
Child combinator X > Y{}:
.xyz > p
{
.........
}
The only difference between X Y selector and X > Y is when we have to select direct child element of a parent element we use Child selector.
For Example:
Compatibility- IE7+, FF, Chrome, Safari, Opera
Adjacent sibling combinator X+Y{}:
.xyz + p
{
.........
}
This will select the element which is coming immediately after the .xyz class element...
For Example:
Compatibility- IE7+, FF, Chrome, Safari, Opera
General sibling combinator x~y{}:
.xyz ~ p
{
.......
}
This selector is similar as adjacent selector but it is not as tough to select only next element. It will select all the specific elements which are coming after the .xyz class element.
For Example:
Compatibility- IE7+, FF, Chrome, Safari, Opera
Please visit our web design services to get more updates on ecommerce web design, travel website design and much more.
