Writing CSS is not that easy if you don't have a proper understanding of how things work in CSS. Don't worry , in this article I will provide you with the complete guide on CSS selectors with some easy code examples.
What is CSS Selector?
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc. Some commonly used css selectors are-
1. Universal Selector
2.Element Selector
3.Class and Id Selector
4.CSS Combinators
1. Universal Selector
The universal selector (*) selects all html elements on the webpage. It will affect every html element on the page.
Example-
* {
text-align: center;
background-color: blue;
}
2.Element Selector
The element selector selects the Html elements by name.
Example-
p {
text-align: center;
color: red;
}
3.Class and Id Selector
Class Selector
The class selector selects HTML elements with a specific class attribute. It is used with a period character . (full stop symbol) followed by the class name.
Example-
In this example all HTML elements with class="center" will be red and center-aligned.
.center {
text-align: center;
color: red;
}
Id Selector
The id selector uses the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element. It is used with (#) hash character to select the id attribute of Html element.
Example-
#para1 {
text-align: center;
color: blue;
}
4.CSS Combinators
Descendant selector (space)
The descendant selector selects all elements that are descendants of a specified element.
Example-
<body>
<div>
<p>Paragraph one</p>
<p>Paragraph two</p>
</div>
<body>
CSS
div p {
background-color: yellow;
}
Child selector (>)
The child selector is used to selects all elements that are the children of a specified element.
Example-
The following example selects all p elements that are children of a div element.
div > p {
background-color: yellow;
}
Adjacent sibling selector (+)
Adjacent sibling selector matches the second element only when the element immediately follows the first element, and both of them are the children of the same parent.
Example-
<body>
<section>
<p>Test 1</p>
<p class="sibling">Test 2</p>
<p>Test 3</p>
<p>Test 4</p>
<p>Test 5</p>
</section>
</body>
CSS
.sibling + p{
background-color: rgb(224, 164, 164);
}
Output
General Sibling Selector (~)
The general sibling selector selects all elements that are next siblings of a specified element.
Example-
<body>
<section>
<p>Test 1</p>
<p class="sibling">Test 2</p>
<p>Test 3</p>
<p>Test 4</p>
<p>Test 5</p>
</section>
</body>
CSS
.sibling ~ p{
background-color: rgb(224, 164, 164);
}
Output
