Loading Please Wait...
General selectors (Simple or Basic selectors) are used to select elements based on name given to tag, class, id, and attributes.
Universal selectors selects all the elements in the HTML page. It is defined by the * symbol.
This is helpful when you want to apply some styles to all of the element such box-sizing, padding, margin, etc.
Syntax: *
/* Selects all elements in the HTML document. */
*{
box-sizing: border-box;
margin: 0;
}
Element selectors (Type or Tag selectors) selects all the elements based on tag name.
This is helpful when you want to apply some styles to all of the same element such removing underline from <a> tag.
Syntax: tagname
/* Select all <a> elements in the HTML document. */
a{
text-decoration: none;
}
Class selectors selects all the elements based on class name given to element. It is defined by the dot (.) symbol.
This is helpful when you want to apply some styles to specific element. You can also selects multiple elements by defining class to them.
Syntax: .classname
/* Select all elements having class text-danger in the HTML document. */
.text-danger{
color: red;
}
/* Select all <p> elements having class text-primary in the HTML document. */
p.text-primary{
color: green;
}
/* Select all <p> elements having both classes text-primary and active in the HTML document. */
p.text-primary.active{
color: blue;
}
ID selectors selects all the elements based on id name given to element. It is defined by the # symbol.
As id attribute is unique throughout the entire DOM Tree, this is helpful for styling unique elements.
Syntax: #id
/* Select only element having id navigation in the HTML document. */
#navigation{
text-decoration: none;
}
Attribute selectors selects all the elements based on attribute name given to element. It is defined by the [] symbol.
This is helpful to select elements based on some criteria.
Select all elements having attribute "attr"
Select all elements having attribute "attr" whose value is exactly "val"
Select all elements having attribute "attr" whose value is exactly "val" or begins with "val" immediately followed by a hyphen -
Select all elements having attribute "attr" whose value is preceded (prefixed) by "val"
Select all elements having attribute "attr" whose value is followed (suffixed) by "val"
Select all elements having attribute "attr" whose value contains the "val"
Select all elements having attribute "attr" whose value is white-space separated, one of which is exactly "val"
Adding i (or I) compared the value case-insensitively.
Adding s (or S) compared the value case-sensitively.
/* Select all elements with attribute title */
[title]{
text-decoration: none;
}
/* Select all <a> elements with attribute title */
a[title]{
text-decoration: none;
}
/* Select all elements with attribute title having value "Lynxsia IT Solutions" */
[title="Lynxsia IT Solutions"]{
text-decoration: none;
}
/* Select all elements with attribute title where value begins with "Lynxsia" or "Lynxsia-" */
[title!="Lynxsia"]{
text-decoration: none;
}
/* Select all elements with attribute title where value begins with "Lynxsia" */
[title^="Lynxsia"]{
text-decoration: none;
}
/* Select all elements with attribute href where value ends with ".com" */
[href$=".com"]{
text-decoration: none;
}
/* Select all elements with attribute href where value contains "lynxsia" at any place */
[href*="lynxsia"]{
text-decoration: none;
}
/*
Select all elements with attribute href where value contains
any combination of "lynxsia", "lynxsia ", " lynxsia ", or " lynxsia"
*/
[href~="lynxsia"]{
text-decoration: none;
}
/* Select all elements with attribute href where value contains exactly "LynXsiA" at any place */
[href*="LynXsiA" s]{
text-decoration: none;
}
/* Select all elements with attribute href where value contains
any combination or uppercase or lowercase letter in "LynXsiA"
*/
[href*="LynXsiA" i]{
text-decoration: none;
}
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved