Selects all elements with class="boxy"
.boxy{
width: 100px;
height : 100px;
background-color : red;
margin : 10px;
display : inline-block;
}
<div class="box">
<div class="boxy"></div>
<div class="boxy"></div>
</div>
Selects the element with id="firstname"
#boxy1{
width: 100px;
height : 100px;
background-color : red;
margin : 10px;
display : inline-block;
}
#boxy2{
width: 100px;
height : 100px;
background-color : red;
margin : 10px;
display : inline-block;
}
<div class="box">
<div id="boxy1"></div>
<div id="boxy2"></div>
</div>
Selects all element in the document.
*{
font-size : 15px;
box-sizing : border-box;
}
Selects all matching element.
In the above example it selects all p elements -
p{
font-weight: bold;
font-size : 19px;
color : blue;
}
You might want to apply the same CSS class to multiple element. for example, you might want to apply fontStyle class to p and h1 element. But you want to select only fontStyle class of h1 element.
h1.fontStyle{
color : red;
}
Selects all elements with the class fontStyle and element is h1
It applies the common CSS rules to all matching element1 and element2.
element1, element2{
color : red;
}
// Example --
p, h1{
margin : 0;
}
In the above example, the CSS rule will be applied to both the p and h1 element.
This is also called Descendant Selector
element1 element2{
line-height : 18px;
}
// Example -
div.hello p{
line-height : 18px;
}
In the above example, all the p element will be selected whose ancestor has class hello
This is also called Child Selector
Select all element2 whose parent element is element1. It means element2 are the child of element1.
In the following example, it selects and style every <p> element where the parent is a <div> element:
element1 > element2 {
background-color: yellow;
}
// Example -
div > p {
background-color: yellow;
}
This is also called Adjacent Sibling Selector
Selects all the element2 that is immediately placed after element1.
element1 + element2{
// CSS rules
}
// Example --
h1 + p {
background-color: yellow;
}
The above example will select all the first paragraph after the h1 element.
This is also called General Sibling Selector
The element1~element2 selector matches occurrences of element2 that are preceded by element1.
Selects all element2 that are preceed by the element1. Both elements must have the same parent, but element2 does not have to be immediately preceded by element1.
element1 ~ element2{
background : red;
}
// Example 1 -
p~ul{
background-color : red;
}
<div class="box">
<div>A div element.</div>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<p>The first paragraph.</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>Another list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
The above example will make the background color red to the second and last ul element.
The [attribute] selector is used to select elements with the specified attribute.
[attribute]{
color : yellow;
}
// Example --
[target]{
color : red;
}
The above example selects all the element whose one of the attribute is target
The [attribute=value] selector is used to select elements with the specified attribute and value.
[attribute = value] {
css declarations;
}
// Example --
[type=text] {
color : green;
}
The above example selects all the element whose one of the attribute is type and it has the value text
input[type=text] {
width: 100px;
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS:
If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out. Think of specificity as a score/rank that determines which style declarations are ultimately applied to an element. The universal selector (*) has low specificity, while ID selectors are highly specific!
Specificity is a common reason why your CSS-rules don't apply to some elements, although you think they should.
Every selector has its place in the specificity hierarchy. There are four categories which define the specificity level of a selector:
Inline styles An inline style is attached directly to the element to be styled. Example: <h1 style="color: #ffffff;">.IDs An ID is a unique identifier for the page elements, such as #navbar.Classes, attributes and pseudo-classes This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.Elements and pseudo-elements This category includes element names and pseudo-elements, such as h1, div, :before and :after.
#one{
background-color : pink;
}
.one{
width: 300px;
background-color : red;
float : left;
height : 300px;
}
<div id="one" class="one"></div>
The background color will be pink.
If the same rule is written twice into the external style sheet, then the lower rule in the style sheet is closer to the element to be styled, and therefore will be applied:
h1 {background-color: yellow;}
h1 {background-color: red;}
The latter rule is always applied.
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
The first rule is more specific than the other two, and will be applied.
If your external style sheet contains the same selector as in your main file where you are importing the external file, then the one which is defined in the main file will be used, and the same style from the external file will be ignored.
// From external CSS file:
#content h1 {background-color: red;}
// In HTML file:
<style>
#content h1 {
background-color: yellow;
}
</style>
The latter rule will be applied.