Select the first div and last div in a class-CodePudding

I would like to modify the first and last child in the class search. Here is my attempt but it doesn't work.

This is my html.

    <div id="search">
        <form method="GET" action="http://images.google.com/images">
            <div>Search</div>
            <div><input type="text" name="q" class="searchInput"></div>
            <div>
                <input type="submit" value="Search Image" class="searchButton">
            </div>
            <div> Try it </div>
        </form>
    </div>

Neither of them works

    .search div:first-child,
    .search div:last-child {
        font-size: large;
        color: red;
    }

    .search form>div:first-child,
    .search form>div:last-child {
        font-size: large;
        color: red;
    }

May I ask what's the problem thank you.

CodePudding user response：

You are using .search Instead of that use #search because you are using an id.

CodePudding user response：

  #search div:first-child,
    #search div:last-child {
        font-size: 30px;
        color: red;
    }

<div id="search">
        <form method="GET" action="http://images.google.com/images">
            <div>Search</div>
            <div><input type="text" name="q" class="searchInput"></div>
            <div>
                <input type="submit" value="Search Image" class="searchButton">
            </div>
            <div> Try it </div>
        </form>
    </div>