What does the “+” (plus sign) CSS selector mean?

Last Updated : 30 Sep, 2024

The “+” (plus sign) CSS selector, known as the adjacent sibling selector, targets the first element that immediately follows another specified element in the HTML structure. It applies styles only to the directly adjacent sibling after the selected element.

Note: The IE8 and earlier versions </DOCTYPE> must be declared to work element + element selector.

Syntax:

element + element {
    // CSS property
}

Example: In this example, we demonstrate the use of the adjacent sibling (+) CSS selector, targeting the <div> immediately following the <h2> element, applying styling like font size, color, and background color.

html

<!DOCTYPE html>
<html>

<head>
    <title>+ sign selector</title>
    <style>
        h2+div {
            font-size: 20px;
            font-weight: bold;
            display: inline;
            background-color: yellow;
            color: green;
        }

        h1 {
            color: green;
        }

        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>+ sign Selector</h2>
    <div>A computer science portal for geeks</div>
</body>

</html>

Output:

Supported Browsers:

The browser supported by “+” selector are listed below:

Apple Safari
Google Chrome
Firefox
Opera
Internet Explorer 7.0

How to Vertically Center Text with CSS?

M

ManasChhabra2

News

Improve

Article Tags :

Similar Reads

How to give a div tag 100% height of the browser window using CSS

CSS allows to adjustment of the height of an element using the height property. While there are several units to specify the height of an element. Set the height of a <div> to 100% of its parent container with height: 100%, or use height: 100vh; for a full viewport height, ensuring the <div

Wildcard Selectors (*, ^ and $) in CSS for classes

Wildcard selectors can be used with attribute selectors. The asterisk (*) matches any character, the caret (^) matches the start, and the dollar sign ($) matches the end of an attribute value. For example, .class* selects all elements with a class attribute containing "class" anywhere, .class^ selec

How to style a dropdown using CSS?

We will learn how to style the dropdown list using CSS and explore its implementation through examples. Dropdown menus are commonly used to allow users to select an option from a predefined list. Styling them properly can enhance your website's user experience and visual appeal. What is a <select

Remove border from IFrame using CSS

The <iframe> tag is used to embed another web page within a webpage. To remove the border from an <iframe>, you can use the frameBorder attribute in the <iframe> tag, setting its value to "0". Syntax: <iframe frameBorder="value"></iframe>Note: The frameBorder attribute

How to Hide Scrollbar with CSS

Hiding the scrollbar with CSS can enhance the look of your webpage by removing visible scrollbars while still allowing users to scroll through content. This can create a cleaner, more streamlined user interface without sacrificing usability. In this article, we’ll explore different methods for hidin

How to apply !important in CSS?

The !important rule in CSS is used to add more importance to a property/value than normal. It forces a style to override any other declarations, ensuring the specified property value is applied, regardless of specificity. It helps resolve conflicts but should be used sparingly to avoid complicating

How to use a not:first-child Selector in CSS?

The :not(:first-child) selector in CSS targets all elements that are not the first child within their parent. It allows you to style elements except the first one, making it useful for applying styles to subsequent items in a list or layout. Syntax:not( element ) { // CSS property } Example: In this

How to Auto-Resize an Image to Fit a Div Container using CSS?

To resize an image or video to fit inside a div container, you can use the object-fit property. This property is used to specify how the content should fit inside the container. With object-fit, you can set the content to maintain its aspect ratio or stretch to fill the entire container. This allows

How to Disable Resizable Property of Textarea using CSS?

The resize property is used to disable the resizeable property of Textarea using CSS, by setting the resize property to none. Note: The resize property in CSS controls whether an element, like a textarea, can be resized by the user. Disable Resizing of TextareaThe resize property in CSS controls an

Create an Unordered List Without Bullets using CSS

To create an unordered list without bullet points, the CSS list-style-type property is used. This removes the default bullet points from the list items, and making the list appear plain. Table of Content Using list-style-type property Remove margin and padding after removing bullet pointsUnordered L

Set cellpadding and cellspacing in CSS

Cell Padding The cell padding is used to define the spaces between the cells and its border. If cell padding property is not applied then it will be set as the default value. Example: C/C++ Code <!DOCTYPE html> <html> <head> <title>cell padding</title> <style> tab

How to overlay one div over another div using CSS

Creating an overlay effect simply means putting two div together at the same place but both the div appear when needed i.e while hovering or while clicking on one of the div to make the second one appear. Overlays are very clean and give the webpage a tidy look. It looks sophisticated and is simple

How to disable a link using only CSS?

To disable a link using CSS, pointer-events can be used, which sets whether the element in the page has to respond or not while clicking on elements. The pointer-events property is used to specify whether the element should respond to pointer events or not. The following example illustrates this app

What does the “+” (plus sign) CSS selector mean?

The "+" (plus sign) CSS selector, known as the adjacent sibling selector, targets the first element that immediately follows another specified element in the HTML structure. It applies styles only to the directly adjacent sibling after the selected element. Note: The IE8 and earlier versions </DO

How to Vertically Center Text with CSS?

Here are three different ways to Vertically center text in CSS. Vertically center text means aligning text to appear in the middle of its container element. 1. Using display PropertyWe can use display: flex to make the container as a flexbox and then applying the align-items: center to vertically ce

How to horizontally center a div using CSS ?

To make an HTML div center horizontally using CSS is quite easy. We can horizontally center any element using the below-mentioned approaches. Before centering a div horizontally we need to create a fixed-size div. We have given a border to the div so the centering of that div can be visible. Set the

Change an HTML5 input placeholder color with CSS

The placeholder selector in the CSS pseudo-element is used to design the placeholder text by changing the text color and it allows to modify the style of the text. In most of the browsers, the placeholder (inside the input tag) is of grey color. In order to change the color of this placeholder, non-

How to Disable Text Selection Highlighting using CSS?

The user-select property in CSS is used to disable text selection highlighting in CSS. This feature is useful when we need to disable the copy option of content. Syntax user-select: none;-webkit-user-select: none; /* Chrome, Opera */-webkit-touch-callout: none; /* Safari */-moz-user-select: none; /*

How to Align Content of a Div to the Bottom using CSS?

Here are different ways to align the content of a div to bottom using CSS. 1. Using PositioningThe positioning involves setting the parent container to position: relative and the content to position: absolute with bottom: 0, which places the content at the container's bottom edge. Syntax position: a

Displaying XML Using CSS

XML stands for Extensible Markup Language. It is a dynamic markup language. It is used to transform data from one form to another form. An XML file can be displayed using two ways. These are as follows :- Cascading Style Sheet Extensible Stylesheet Language Transformation Displaying XML file using C

How to Include One CSS File in Another?

Including one CSS file within another allows you to organize your styles more efficiently. This technique is useful for managing large stylesheets or applying consistent styles across multiple pages. You can do this using the @import rule in CSS. Examples of Including CSS File in AnotherExample 1: T

How to Change the Cursor into a Hand Pointer on Hover over list using CSS

CSS offers a powerful property called "cursor" that controls the appearance of the mouse pointer when hovering over specific HTML elements. By assigning different values to this property, you can customize the cursor's behaviour. In our case, we'll be using the value "pointer" to trigger the classic

How to position a div at the bottom of its container using CSS?

Positioning a div at the bottom of its container means aligning the div so that it stays at the lowest point within the container's boundaries. This can be done using CSS techniques like absolute positioning, Flexbox, or Grid, each method providing different layout control options. Table of Content

How to hide an element when printing a web page using CSS?

Media queries allow you to apply different styles for different media types, such as screens or print. To hide certain elements (like headers or images) when printing a webpage, you can use the @media print query and set the visibility: hidden or display: none to hide those elements during printing.

Targeting only Firefox with CSS

Sometimes the content needs to focus on the particular browser. This article target the Firefox browser to display CSS property. The targeted CSS will works only for targeted browser. Target the Firefox browser with CSS in many ways. Some of them are discussed below: Method 1: This method uses Mozil

翻译：