jQuery Selectors: Selects an element immediately preceded by a specific element

This entry is part 21 of 33 in the series jQuery Selectors

$(‘prev + next’)

Here it selects a next element immediately preceded by prev element.

We use the example $(‘label + input.tele’) where it will select an input element with a class tele.

It needs to be preceded by label element.

<!DOCTYPE html>
<html lang='en'>
    <meta charset='utf-8'>
    <title>Quick contact form</title>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
        $(function () {
            $('label + input.tele').css({'border-width': '1px', 'width': '300px'});
        <legend>Contact information</legend>
                <label for='email'>Email:</label>
                <input required type='email' id='email' name='email'/>
                <label for='tel'>Telephone number:</label>
                <input required type='tel' id='tel' name='tel' class='tele'/>
                <label for='url'>Website:</label>
                <input required type='url' id='url' name='url'/>
        <input type='submit' value='Submit this'/>

Series Navigation<< jQuery Selectors: Selects a child with a specific immediate parent with a class
jQuery Selectors: Sibbling selector ~ >>

Leave a comment

Leave a Reply