Menu
If I have this HTML, how can I select all elements between #one and #two
with CSS? I can't use jQuery.
<p id="one"></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p id="two"></p>
707
To select multiple elements, you can simply click and drag your cursor over your them. Alternatively, hold down the Ctrl / Shift key on your keyboard (Cmd key for Mac) and click the elements to select them. Tip: You can select all elements at once by pressing Ctrl+A on your keyboard.
The * selector selects all elements. The * selector can also select all elements inside another element (See "More Examples").
Element Selectors The most basic of the selectors is an element selector. For example, paragraphs in an HTML document are represented by the p element and wrapped in <p></p> tags. To select all paragraphs in a document we would use the following selector. To select all level 1 headings we would use the h1 selector.
Class selectorsThe class selector starts with a dot ( . ) character. It will select everything in the document with that class applied to it. In the live example below we have created a class called highlight , and have applied it to several places in my document.
The ~ general sibling combinator is what you are looking for
#one ~ p:not(#two) {
color: red;
}
So what the above selector does is, it starts selecting all the p elements which are adjacent to #one till #two and later, I use :not() pseudo to exclude the last p:
#one ~ p:not(#two) {
color: red;
}<p id="one">0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p id="two">6</p>JSFiddle
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
