Select Specific Element Before Other Element

Select specific element before other element

As far as I know, CSS doesn't offer any selectors which will target before a selector. Could you select it as an h2 which is directly after a p (p + h2)?

h2 {
    color: #1a1a1a;
}

p + h2 {
    color: #0cc;
}

Example on JSFiddle

As you can see, this is probably the best selector you can use if you're relying on CSS, although you could easily just add a class to each h2 that is before a ul. That would avoid the case where you have a paragraph section before another h2 and paragraph section.

You could do this using jQuery:

.highlight {
    color: #0cc;
}

$('ul').prev('h2').addClass('highlight')

Example on JSFiddle

This selects every ul, then selects the h2 that is before it, before finally adding the .highlight class to it.

Select all elements before element with class?

a {  text-decoration: none;  border-left: 1px solid black;}
a.active, a.active ~ * {  border: none;}

<div>    <a href>One</a>    <a href>Two</a>    <a href>Three</a>    <a href class="active">Four</a>    <a href>Five</a></div>

Select an element that comes before another element with the same class in CSS

If I understand it correctly, you want

.alert {
  margin-bottom: 0;
}
.alert:last-child {
  margin-bottom: 20px;
}

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';.alert {  margin-bottom: 0;}.alert:last-child {  margin-bottom: 20px;}

<div class="alert alert-success" role="alert">The <code>margin-bottom: 20px</code> was overriden by <code>margin-bottom: 0</code>.</div><div class="alert alert-info" role="alert">The <code>margin-bottom: 20px</code> was overriden by <code>margin-bottom: 0</code>.</div><div class="alert alert-warning" role="alert">The <code>margin-bottom: 20px</code> was overriden by <code>margin-bottom: 20px</code>.</div>

Is there a previous sibling selector?

No, there is no "previous sibling" selector.

On a related note, ~ is for general successor sibling (meaning the element comes after this one, but not necessarily immediately after) and is a CSS3 selector. + is for next sibling and is CSS2.1.

See Adjacent sibling combinator from Selectors Level 3 and 5.7 Adjacent sibling selectors from Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.

How can i select every element before a specific element

Wrap every block of <p> and use :last-child. If you're doing many <p> it is best to just add a class to each element that has the desired styles.

<div>

  <p>Hello</p>
  <p>Hey</p>

</div>

p:last-child{
  font-size: 30px; // only last element has a font size of 30 px
}

You also didn't close any of your <p> tags. Make sure your code is formatted before posting.

CSS Selector for selecting an element that comes BEFORE another element?

It would be possible to use the 'adjacent sibling selector' if the input was before the label. Just put the input before the label, and then modify the layout to put label before the input. Here's an example:

<head runat="server">
    <title></title>
    <style type="text/css">
    input:focus + label {font-weight: bold}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="direction:rtl">
        <input type="text" id="username" />
        <label for="username">Username:</label>
    </div>
    <div style="direction:rtl">
        <input type="password" id="password" />
        <label for="password">Password:</label>
    </div>
    </form>
</body>

(It's kind of a hack, I would personally use javascript to do this)

input:focus + label {font-weight: bold}

<form id="form1" runat="server">  <div style="direction:rtl">    <input type="text" id="username" />    <label for="username">Username:</label>  </div>  <div style="direction:rtl">    <input type="password" id="password" />    <label for="password">Password:</label>  </div></form>

Select first occurring element after another element

#many .more.selectors h4 + p { ... }

This is called the adjacent sibling selector.

Can I select an element that's not immediately after another, e.g. :not(.foo + .bar)?

It's worth noting that :not(.foo + .bar) is valid in Selectors 4, and implementations are on their way. Having said that, due to the nature of the adjacent sibling combinator + (and similarly the child combinator >), there is a Selectors 3 equivalent, although you will need a list of up to three complex selectors:

:first-child, :not(.foo) + *, .foo + :not(.bar)

But this is a direct conversion that accounts for elements that are not .bar. More likely, you just want to match any .bar that's not directly preceded by a .foo. In that case, it gets even simpler:

.bar:first-child, :not(.foo) + .bar

And you can pick and choose further depending on your needs:

If not being preceded by a .foo means .bar becomes the first child, you can just use .bar:first-child.
If .bar is guaranteed to have a preceding sibling, you can just use :not(.foo) + .bar.

If you need to account for both possibilities, then listing both as shown above will do just fine.

Note that the .foo and .bar selectors don't necessarily have to be different. You can match any .bar that's not immediately preceded by another .bar with the exact same technique.

Select Specific Element Before Other Element