This article deals with CSS Selectors – one of the most common and important design components of a web page. In order to apply styles selectively to different elements of a page, we use CSS Selectors. Different kinds of CSS selectors have different priorities and attributes, and this article elaborates the same for several of the basic selectors.
Many of the selectors mentioned in this article are specifically part of the CSS3 and are, therefore, only available in modern browsers. So let’s start to list them out:
1. Star symbol
The star symbol will target (select) every single element on the page. Developers will use this trick to zero out the padding and margin.
*{
margin: 0;
padding: 0;
}
I would advise you to never use this in production code since it adds too much weight on the browser, and sometimes, unnecessary elements are also affected.
The star (*) can also be used with child selectors.
Example:
#container div * {
border: 1px solid black;
}
This will target every single element that is a child of the #container div.
2. “id” selector
Hash symbol (#) to a selector allows us to target by id.
Example:
#container {
width: 960px;
margin: auto;
}
3. “class” selector
dot symbol(.) to a selector allows us to target by class.
Example:
.success {
color: green;
}
The difference between ids and classes is that
i. Classes are used when you want your styling to apply to a group of elements.
ii. Ids are used to find a needle-in-a-haystack, and to style only that specific element.
4. “descendant” selector
This is to be more specific with your selectors. For example, instead of targeting all anchor tags, what if you need to target only the anchors which are within an unordered list? This is how you use a descendant selector:
li a {
text-decoration: none;
background:blue;
}
To target all the anchor elements on a page:
a {
text-decoration: none;
background:blue;
}
5. pseudo-class
pseudo-class is a keyword added to selectors that specify a special state of the element to be selected.
The “:link” pseudo-class, for example, is to target all anchors tags which are yet to be clicked on.
Example:
a:link { color: green; }
The “:visited” pseudo class, which, as you would expect, allows us to apply specific styling to only the anchor tags on the page which have been clicked on, or visited.
Example:
a:visted { color: purple; }
List of other pseudo-class:
:link
:visited
:active
:hover
:focus
:first-child
:last-child
:nth-child
:nth-last-child
:nth-of-type
:first-of-type
:last-of-type
:empty
:target
:checked
:enabled
:disabled
6. Adjacent selector
ul + p {
color: blue;
}
In this example, only the element that is immediately preceded by the parent element is selected. Which means, in this case, only the first paragraph after each ul will have red text.
7. Attributes selector
To select the anchor tags that have a title attribute,
a[title] {
color: blue;
}
a[href="http://agira.com"] {
color: #1f6053; /* agira green */
}
The above will style all anchor tags which link to http://agira.com, and they will receive green color.
a[href*="agira"] {
color: #1f6053; /* agira green */
}
The star designates that the proceeding value must appear somewhere in the attribute’s value.
Use ^ and $ to reference the beginning and end of a string respectively.
a[href^="http"] {
background: blue;
padding-left: 10px;
}
To select Ending with specific string,
a[href$=".jpg"] {
background: blue;
padding-left: 10px;
}
All of the various image types will select
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: green;
}
8. A pseudo-element is composed of two colons “::”
To target the First Letter of a Paragraph
p::first-letter {
float: left;
font-size: 24px;
font-weight: bold;
font-family: roboto;
padding-right: 2px;
}
To target the First Line of a Paragraph
p::first-line {
font-weight: bold;
font-size: 14px;
}
These are the basic CSS selectors that are used in style sheets. More advanced selectors will be discussed in the next blog.
Media Query – CSS Selectors – Part 2
