Trying to select a child element using ~-CodePudding

I am having issues using the ~ to select a child element inside of the same div.

HTML Example

<div ></div>

CSS Example

.about ~ .one {
   background-color: #0068bf;
}

Here's my code:

HTML Snippet:

        <div >
            <div >
                <div >
                    About Title
                </div>
                <div >
                    A basic description
                </div>
            </div>
        </div>

CSS Snippet:

.about-wrapper {
    display: grid;  
    grid-template-areas: 
        "About  Empty"
        "Join   Empty";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    margin: 12vh;
}

.about {
    background-color: #2b2b2b64;
    border-radius: 2rem;
    padding: 2rem;
    margin: 2vw;
}

.about ~ .one { /* This is the only thing that wont work */
    background-color: #0068bf;
    grid-column-start: 1fr;
    grid-column-end: 3fr;
}

.about .title {
    font-family: 'Rubik 80s Fade', cursive;
    font-size: 2.75vw;
    color: #ffffff;
}

.about .desc {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 2vw;
    letter-spacing: -0.1vw;
    color: #ffffffe8;
}

I've used this before in a previous site and it worked just fine but it doesn't seem to be working here. The code is the same as the other code pretty much. I've been at this awhile so if anyone has an answer please help. (I also searched everywhere and couldn't find anything helpful).

CodePudding user response：

.about-wrapper {
    display: grid;  
    grid-template-areas: 
        "About  Empty"
        "Join   Empty";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    margin: 12vh;
}

.about {
    background-color: #2b2b2b64;
    border-radius: 2rem;
    padding: 2rem;
    margin: 2vw;
}

.about ~ .one { /* This is the only thing that wont work */
    background-color: red;
    grid-column-start: 1fr;
    grid-column-end: 3fr;
}

.about .title {
    font-family: 'Rubik 80s Fade', cursive;
    font-size: 2.75vw;
    color: #ffffff;
}

.about .desc {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 2vw;
    letter-spacing: -0.1vw;
    color: #ffffffe8;
}

<div >
            <div >
                <div >
                    About Title
                </div>
                <div >
                    A basic description
                </div>
            </div>
            <div >
            ~ is a selector for siblings. So it effects THIS div (the sibling of about one) 
            <div/>
        </div>

<!-- begin snippet: js hide: false console: true babel: false -->

CodePudding user response：

The tilde combinator (~) targets siblings only.

Your CSS rule...

.about ~ .one

is saying:

Select all elements with a class one that are preceded by a sibling element with a class about.

Therefore, your title:

Trying to select a child element using ~

... is self-explanatory. You don't select child elements with this tool.

To select child elements, use the descendant ( ) or child (>) combinators.

More details here:
https://www.w3.org/TR/selectors-3/#selectors