CODEWITHSUNDEEP
css
mark davies
mark davies

Reputation: 139

Applying CSS using Child/ Parent technique

Someone wrote this CSS code for me which applies it to a webpage on my site.. it works fine. However, I want to apply it on a different page as shown below. I need the ltlitems displayed with this CSS applied.. I'm guessing it applies it to the div around it? Apologies, I'm just learning. I am unsure how this part works.. h1:first-child + p + div > div:first-child

<div class="pageContent">

    <asp:Label ID="lblMsg" runat="server" Text="" Visible="false"></asp:Label>
    <h1>Welcome</h1>
    <p>Bla Bla Bla</p>

    <iframe width="90%" height="315" src="https://www.youtube.com/embed/v10" frameborder="0" allowfullscreen></iframe>
    <h2>How To Sell</h2>
    <p>Selling couldn't be easier..</p>
    <asp:Image ID="HowToSell" alt="How To Sell" runat="server" class="screenfit" ImageUrl="~/files/images/howTo.png" />
    <h2>Featured Boxes</h2>

    <p>Below are some of our featured items</p>

    <div style="margin:auto; text-align:center;">
        <asp:Literal ID="ltlItems" runat="server"> </asp:Literal>
    </div>
</div>


.pageContent > h1:first-child + p + div > div:first-child {
   display: -webkit-box; 
   display: -webkit-flex; 
   display: -moz-box; 
   display: -ms-flexbox; 
   display: flex; 
   -webkit-flex-wrap: wrap; 
   -ms-flex-wrap: wrap; 
   flex-wrap: wrap; 
   -webkit-box-pack: center; 
   -webkit-justify-content: center; 
   -moz-box-pack: center; 
   -ms-flex-pack: center; 
   justify-content: center; 
}

Upvotes: 0

Views: 41

Answers (1)

cssyphus
cssyphus

Reputation: 40068

h1:first-child + p + div > div:first-child

Find the first <h1> tag . . .

With a <p> tag immediately below that

And a <div> immediately following that

And inside that div, there should be one or more divs

But select only the first div and apply the styling here

first-child means: just the first one that applies

+ means: the next element on the same level (not inside/under)

> means: inside/under

Looking at the CSS code on the question, though, there is an obvious problem if that is how it is written on your site.

CSS, when included on the page like that, should be between <style> tags, thus:

<style>
.pageContent > h1:first-child + p + div > div:first-child {
   display: -webkit-box; 
   display: -webkit-flex; 
   display: -moz-box; 
   display: -ms-flexbox; 
   display: flex; 
   -webkit-flex-wrap: wrap; 
   -ms-flex-wrap: wrap; 
   flex-wrap: wrap; 
   -webkit-box-pack: center; 
   -webkit-justify-content: center; 
   -moz-box-pack: center; 
   -ms-flex-pack: center; 
   justify-content: center; 
}
</style>

Also, the -webkit, -ms, -moz prefixes are probably no longer required. They were needed only for a couple of years while the different browsers were being updated to include new features. So, for example, this:

   -webkit-box-pack: center; 
   -webkit-justify-content: center; 
   -moz-box-pack: center; 
   -ms-flex-pack: center; 
   justify-content: center;

can probably be replaced with just this:

   justify-content: center;

Indeed, the whole thing can probably be reduced to:

<style>
.pageContent > h1:first-child + p + div > div:first-child {
   display: flex; 
   flex-wrap: wrap; 
   justify-content: center; 
}
</style>

Upvotes: 1

Related Questions