Select first occurring element after another element
#many .more.selectors h4 + p { ... }
This is called the adjacent sibling selector.
Selecting the direct first element after another element in CSS
You can use an adjacent sibling combinator:
#text + span {
/* Styles */
}
Here's a working example.
Update (see comments)
To target the second span
you can simply add another adjacent sibling combinator to the selector:
#text + span + span {
/* Styles */
}
Select an element after another element in JavaScript
The next element is stored in nextElementSibling
property of the specific element on javascript.
Jquery, select first next element after all anchors with same class
You can use the next sibling selector +
to target the ul directly after the class elements.
console.log( $('.some_anchors + ul').get());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><a class="some_anchors"></a><ul id="ul_1"></ul><ul class="not-me"></ul>
<a class="some_anchors"></a><ul id="ul_2"></ul><ul class="not-me"></ul>
<a class="some_anchors"></a><ul id="ul_3"></ul><ul class="not-me"></ul>
<a class="some_anchors"></a><ul id="ul_4"></ul><ul class="not-me"></ul>
CSS selector for first element with class
This is one of the most well-known examples of authors misunderstanding how :first-child
works. Introduced in CSS2, the :first-child
pseudo-class represents the very first child of its parent. That's it. There's a very common misconception that it picks up whichever child element is the first to match the conditions specified by the rest of the compound selector. Due to the way selectors work (see here for an explanation), that is simply not true.
Selectors level 3 introduces a :first-of-type
pseudo-class, which represents the first element among siblings of its element type. This answer explains, with illustrations, the difference between :first-child
and :first-of-type
. However, as with :first-child
, it does not look at any other conditions or attributes. In HTML, the element type is represented by the tag name. In the question, that type is p
.
Unfortunately, there is no similar :first-of-class
pseudo-class for matching the first child element of a given class. At the time this answer was first posted, the newly published FPWD of Selectors level 4 introduced an :nth-match()
pseudo-class, designed around existing selector mechanics as I mentioned in the first paragraph by adding a selector-list argument, through which you can supply the rest of the compound selector to get the desired filtering behavior. In recent years this functionality was subsumed into :nth-child()
itself, with the selector list appearing as an optional second argument, to simplify things as well as averting the false impression that :nth-match()
matched across the entire document (see the final note below).
While we await cross-browser support (seriously, it's been nearly 10 years, and there has only been a single implementation for the last 5 of those years), one workaround that Lea Verou and I developed independently (she did it first!) is to first apply your desired styles to all your elements with that class:
/*
* Select all .red children of .home, including the first one,
* and give them a border.
*/
.home > .red {
border: 1px solid red;
}
... then "undo" the styles for elements with the class that come after the first one, using the general sibling combinator ~
in an overriding rule:
/*
* Select all but the first .red child of .home,
* and remove the border from the previous rule.
*/
.home > .red ~ .red {
border: none;
}
Now only the first element with class="red"
will have a border.
Here's an illustration of how the rules are applied:
.home > .red {
border: 1px solid red;
}
.home > .red ~ .red {
border: none;
}
<div class="home">
<span>blah</span> <!-- [1] -->
<p class="red">first</p> <!-- [2] -->
<p class="red">second</p> <!-- [3] -->
<p class="red">third</p> <!-- [3] -->
<p class="red">fourth</p> <!-- [3] -->
</div>
jquery selecting any first p element after an heading whether another element is also there
It's not working as expected because .next('p')
will only select the immediately following p
element. You could use the .nextAll()
method to select all the following p
elements (not just the immediately following one), then chain the .first()
method to get the first match in the collection:
Example Here
$('h3, h2').each(function () {
$(this).nextAll('p').first().css({ "color":"green"});
});
CSS Selector - first element with Class in a group of same class
To select first child of the ul
element, you can use :first-child
pseudo-class.
To select the first element in each group, you can use adjacent sibling selector.
.A + .B
will select any element with class B
that immediately follows an element with class A
. Similarly .B + .A
will select any element with class A
that immediately follows an element with class B
.A { background: red; }.B { background: blue; }
.A:first-child,.B + .A,.A + .B { background: yellow;}
<ul class="list"> <li class="item A">AAA</li><!-- I want to select this --> <li class="item A">AAA</li> <li class="item A">AAA</li> <li class="item B">BBB</li><!-- I want to select this --> <li class="item B">BBB</li> <li class="item B">BBB</li> <li class="item A">AAA</li><!-- I want to select this --> <li class="item A">AAA</li> <li class="item A">AAA</li></ul>
Related Topics
HTML Float Right Element Order
Why Is The First Element Always Blank in My Rails Multi-Select, Using an Embedded Array
Exclude Element with Fixed Positioning from Justify-Content in Flex Layout
How to Handle Xml/HTML in Git Feature Branch Workflow
<Form Method="Link" > or <A>? What's The Difference
Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques
HTML5 Canvas Slows Down with Each Stroke and Clear
Maintain Image Aspect Ratio in Carousel
Scrollbar Without Fixed Height/Dynamic Height with Scrollbar
CSS Grid Row Height Safari Bug
Wkhtmltopdf Not Loading Local CSS and Images
Overflow Behavior After Using CSS3 Transform
Can't Show Some Websites in Iframe Tag
HTML Maxlength Attribute Not Working on Chrome and Safari
How to Make a Div with Arrowlike Side Without CSS Border Tricks