Although it may seem like a simple question, I still find myself puzzled about the usage of + or > in CSS.
I often come across selectors such as li > a or div + span, but I'm unsure of the distinctions between them and when to apply each one?
When you see the > sign, it means to select a direct descendant
For instance:
CSS
div > ul {
list-style: none;
}
HTML
This style would target the <ul> element inside the <div>
<div>
<ul>
</ul>
</div>
On the other hand, the + sign indicates selecting an adjacent sibling
For example:
CSS
p + p
{
font-weight: bold;
}
HTML
In this case, the style will be applied to the second <p> tag
<div>
<p></p>
<p></p>
</div>
Learn more about selectors in the W3 CSS spec, or continue reading for a summary:
Selection of Immediate Child
The > selector is used to target the immediate child element. In the example li > a, any <a> tag that is directly nested inside an <li> element will be selected.
For instance, this anchor element would be chosen:
<ul>
<li><a href="#">An anchor</a></li>
</ul>
Adjacent Sibling Selection
The + selector represents the adjacent sibling relationship. In the case of div + span, any <span> element immediately following a <div> within the same parent container will match the rule.
Here's an example where the span element would be targeted:
<article>
<div>A preceding div element</div>
<span>This span would be selected</span>
</article>
The > is a special selector known as the direct child selector. For instance, when you use li > a, it will specifically target <a> tags that are immediate children of the <li> element.
On the other hand, the + symbol is used to select siblings of the elements you've previously chosen. So, for example, in div + span, it would pick any <span>s that come right after a <div> (given they share the same parent).
li > a specifically targets a elements that are direct children of li elements. On the other hand, div + span selects span elements that come right after a div element.
To explore further, check out the link shared by @bažmegakapa: http://www.w3.org/TR/CSS2/selector.html#pattern-matching
I'm not entirely certain about the use of the + symbol, but in CSS, the > symbol signifies a direct child of an element. Take a look at this example:
div > h1 { color: red; }
This code will apply styles to all h1 tags that are direct children of a div.
<h1>BLAH</h1>
<div>
<h1>BLAH</h1>
</div>
In this scenario, the first h1 tag would remain unchanged, while the second h1 tag, being a direct child of the div element, would appear in red text.
I need some help with a CSS formatting question. My current setup works well, the menu's position adjusts based on screen size to be centered both vertically and horizontally. However, I'm facing an issue where elements start overlapping if the v ...
There seems to be a strange issue with the IconButton in @material-ui/core/IconButton that is causing a weird elliptical background to appear when hovering over it. https://i.stack.imgur.com/Xof8H.png Even after copying the code directly from the materia ...
I'm experiencing some difficulty with positioning a second navigation bar in my Adobe XD design. View the Adobe XD design here My attempts to use the float element have resulted in an overlap with the background image for the hero section. Here is h ...
Facing an issue with two divs placed side by side where long text in one div overflows into the other. Check out this example for reference: http://jsfiddle.net/hjZ8F/1/ Any suggestions on how to fix this layout problem? ...
Check out the code snippet below: Here is the HTML5 code block: <div class="col-md-8 blogger-right-container"> <form action="blogger_account.php" method="post" role="form" enctype="multipart/form-data"> < ...
Need help with creating dynamic shadows on divs. Here is what I have so far: HTML <div id="wrapper"> <div id="div1" class="castsshadow">Div 1</div> <div id="div2" class="castsshadow">Div 2</div> <div id="div3" ...
Recently, I created a complex liquid slider that serves as the header for my website. This slider contains various important content elements like heading tags (h-tags), paragraph tags (p-tags), and images. I found myself pondering whether each individua ...
I've developed a single page app where each page is initially set to display:none. To show pages, I add a class called .current-page: .current-page{ display:block; } So in order to switch between pages, I simply toggleClass('current-page&a ...
Currently, I am revisiting some older code and working on arranging the content properly on my webpage. However, I have encountered an issue: while my flex properties are functioning correctly, the '.justify-content-...' is not working as expecte ...
I'm facing a challenge and struggling to find a way to highlight text using CSS or jQuery. My goal is to have an image on the left, another one on the right, and a repeated image in between. Since there are some long words involved, I need a dynamic s ...
Recently, I added a voting system to my website inspired by this source. It's functioning well, but there is an issue where each vote can sometimes count for more than one. You can view the source code on the original website and test it out live here ...
Just starting out with RoR and trying to customize my form with CSS classes. Here's what I have so far: <%= form_tag :action => 'create' do %> <p><label for = "name">Name</label>: <%= text_field ...
I'm having a row with 4 columns, and I need the last 2 columns to stack below and utilize all available width. How can I achieve this? https://i.sstatic.net/VqEGZ.png <table border="1" style="width: 100%;"> <t ...
Currently building my website and encountering an issue. At the top of the page is my header with a navigation menu inside it. As I scroll down the page and the header moves out of view, I would like another DIV to slide down from the top (fixed in positi ...
Currently, I am attempting to create a header that has a freezing effect. My goal is to have a banner at the top with a navigation menu underneath it. When scrolling down, I want the banner to disappear but have the navigation menu remain frozen at the top ...
Two versions of a small project exist, 'webpack' and 'retro'. The webpack version utilizes ../app.scss/...@import "~bootstrap/scss/bootstrap"; for serving styles (css), while the retro version uses the outdated <link rel=&q ...
Earlier I attempted to ask this question from my phone, but it ended up being overly convoluted and confusing. Therefore, I have decided to start fresh after locating a working PC. Unfortunately, due to the sensitive nature of the project, I am unable to p ...
.vpbutton {padding:4px;background-color:#EFEFEF;} .userbox img{padding:8px;background-color:#EFEFEF;} .userbox img:hover{opacity:.2;} <div class="userbox"> <img src='img.png' style='height:120px;width:120px;border:1p ...
I need to keep one specific div visible on the page while hiding all other content. However, I am facing an issue where the <br> tag inside that div is not showing up. <div id='min320'>min 320px<br>screen width required</div ...
As I work on creating my own homepage, I came across someone else's page that I really liked. I decided to download the page source and open it locally in my browser. However, I noticed that while the contents were all there, the style (frames, positi ...