Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to style every element that have adjacent item right before it?
Selectors are an important part of the CSS styling as all the properties which are applied to the elements are done using the selectors> it is also possible to select the elements on the basis of their relationship with some other element like a element which has a preceding element or any other element in the series. There are sibling combinator, child combinator and adjacent sibling combinator.
In this article we are going to have a look at how can we style the element that have an adjacent item right before it
Styling elements with adjacent items
The elements which are adjacent to each other can easily be styled by suing the adjacent sibling selector, which will select the element that is adjacent or the element is next to the selector tag, which is specified and it can select only one tag which is going to be next to the specified tag. Let’s look at the syntax of the adjacent sibling selector
Syntax
former_element + target_element {properties to be applied}
The selectors which we are using for selecting the elements along with the (+) selector are all different types of combinator like in this case, 2 selectors will be used combined together by the (+) selector between them. To understand this better let’s look at an example
Example
The selector will only be going to select sibling elements which will come one after the other which means that both of those elements will be sharing the same parent. Let’s look at the code of the example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of styling every element which will be adjacent item right before it</title>
<style>
h1 {
color: lightblue;
}
img + p {
color: yellow;
}
img + p + p {
color: darkblue;
img + p {
color: yellow;
}
}
</style>
</head>
<body>
<center>
<h1>Hello, welcome to an example</h1>
<img src="https://www.tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" alt="scenery image" />
<p>this is the first paragraph coming after the image</p>
<p>this is the second paragraph coming after the image</p>
<p>this is the third paragraph coming after the image</p>
</center>
</body>
</html>
In the above code, we first created a heading tag and then used an image after which we added three lines of paragraphs. We styled them by using the sibling selector. The (+) sign between the image selector and the paragraph selector tells us the relationship between the image and the paragraphs.
In the above output, we can see that the heading and the paragraphs which are below it are styled using the sibling combinator.
The combinator or selector will separate 2 selectors which, in this case is the image and the paragraph first line and then the image and then the second line of paragraph. The second element must be followed by the first element and both should be the children of the same parent like the following code
img+p{
color:red;
}
In the above code, you can see the image is the first child and the second child which are connected with the sibling connector.
Example
Let’s look at another example to understand the property better
<!DOCTYPE html>
<html lang="en">
<head>
<title>Another example of the sibling connector </title>
<style>
div+p {
font-weight: bold;
color: lightgreen;
margin: 0px;
font-size: 37px;
text-align: center;
}
h2 {
color: lightblue;
}
p {
text-align: center;
}
div {
text-align: center;
}
</style>
</head>
<body>
<center>
<h1>Hi, this is an example </h1>
<div>An example of Adjacent sibling selector property</div>
<p>How is your day going?</p>
<div>
<div>This is the child element</div>
<p>Good morning</p>
</div>
<p>Good Evening</p>
<p>Good Night</p>
</center>
</body>
</html>
In the above code created heading, and containers along with paragraphs and then in the CSS section, we gave the heading a color to distinguish it after which used to the sibling combinator with the paragraph tag and so we were able to style the paragraph along with the div using the sibling combinator.
Let’s look at the output that we will be getting after using the following code.
In the above example you can see that the heading tag has another color and the div along with the paragraph tags the div and the paragraph tags are having the same color because we used the sibling selector.
What is the sibling selector?
There are 2 sibling connectors which are the general sibling connector and the sibling selector which is adjacent. It mostly used to select a group of elements which share the same parent.
The adjacent sibling selector selects the element which is adjacent or the element which is next to the specified tag and also selects one tag which is next to the tag which is specified.
(+) is used for the adjacent sibling selector
(~) is used for the general sibling selector
Conclusion
The connectors are used to specify the relationship between 2 selectors and the adjacent sibling selector is also a part of these connectors. The (+) symbol will be used to select the elements adjacent to the element which was first selected. These selectors allow the developer to style which are adjacent to each other or elements which have the same parent.
In this article we saw how can we saw how can we be styling every element which has
50 Views
To Continue Learning Please Login