How to style a particular paragraph element in css without effecting the other paragraphs in the same class?


Tags: html,css,inheritance,parent-child

Problem :

I am trying to style paragraph element present at line number 5(List your dependents....smoking habits) but for some reasons it is effecting the other paragraph elements present in the same class. I just want to style line number 5 (paragraph element) without having effect on the other paragraph elements present in the same class.

<div class="inter">
<div class="dependents">

    <h2 class="my-life-events ttl"><!-- ko i18n: 'enrollNow.dependents' -->My dependents<!-- /ko --></h2>
    <p>List your dependents and enter their personal information. Pay close attention to information regarding your spouse’s smoking habits</p>


<div class="section header single">
    <div class="inter">
        <!-- ko i18n:'dependents' -->Dependents<!-- /ko -->
        <div class="info header-sections" data-bind="popup: {
                    popupId: 'info-popup',
                    closeOnOutsideClick: true,
                    vm: {title: '', message: depend_info[locale.selected_locale()]}
                }"></div>
    </div>
</div>

<div class="section single">
    <div class="inter">
        <table cellspacing="0" cellpadding="0" class="table title">
            <tbody><tr>
                <td class="cell1"><!-- ko i18n:'dependents.name' -->Name<!-- /ko --></td>
                <td class="cell2"><!-- ko i18n:'dependents.type' -->Type<!-- /ko --></td>
                <td class="cell3"><!-- ko i18n:'dependents.status' -->Status<!-- /ko --></td>
                <td class="cell4 last"></td>
            </tr>
            </tbody><tbody data-bind="foreach: dependents"></tbody>
        </table>
        <!-- ko ifnot: pendingApproval || viewReadonlyBenefits-->
        <table cellspacing="0" cellpadding="0" class="table">
            <tbody><tr data-bind="css:{hidden: dependents().length != 0}" class=""><td colspan="3" class="cell-common"><!--ko i18n: 'dependents.no.dependent' -->There is no dependent registered in your file<!--/ko--></td></tr>
            <tr>
                <!-- ko if: showAddButton() --><!-- /ko -->
           </tr>
        </tbody></table>
        <!-- /ko -->
    </div>
</div>


<div class="inter-note">   
    <br>
    <h4><!-- ko i18n: 'life.note' -->Note<!-- /ko --></h4>
    <!-- ko ifnot: showAddButton() -->    
    <p><span data-bind="html: i18n('microsite.dependents.note.text1')">To add/remove a dependent or to modify your spouse's insurer information, go to the <a href="#home/life-events">My life events</a> section and follow the instructions.</span></p>
    <!-- /ko -->
    <p>
        <span data-bind="html: i18n('microsite.dependents.note.text2')">To modify your beneficiaries, please complete and sign the </span>
        <a data-bind="text: i18n('microsite.dependents.note.text3'), attr:{href: vm.home.beneficiaryLink()}" target="_blank" href="">Beneficiary designation</a>
        <span data-bind="html: i18n('microsite.dependents.note.text4')"> form and return it to your plan administrator.</span>
    </p>

</div>



</div>    
</div>

I tried by using following code but still it was effecting the whole paragraph elements present in the class.

.dependents p
{
/* styles */
}


div.dependents p
{
/* styles */
}


Solution :

your problem come from a misanderstanding of the class usage.

.dependents p 
{
    /* styles */
}

This code shoudl be interpreted as:

Every element <p> that is a child (or sub child) of an element containing the class "dependents", will have the style inside curlybraces.

As say "junkfoodjunkie", "rorymorris89" or "sergio0983", if you want that the style was apply only for direct descendants you should use :

.dependents > p
{
    /* styles */
}

That mean only direct child <p> element will be styled, and not sub-children.

But if you want that only on element <p> got a specific style, why don't you use an new class only for this specific element <p> ?

Your code should be:

<div class="inter">
    <div class="dependents">
        <h2 class="my-life-events ttl"><!-- ko i18n: 'enrollNow.dependents' -->My dependents<!-- /ko --></h2>
        <p class="my-paragraph-style">List your dependents and enter their personal information. Pay close attention to information regarding your spouse’s smoking habits</p>

and css:

.dependents p.my-paragraph-style
{
    /* style */
}

Best regards,
Tristan.


    CSS Howto..

    How do you change the background opacity in CSS?

    How to shift the alignment of text in a select dropdown toward the top and left with CSS?

    How to have equal padding on both side of a div. CSS

    How to align images and text in css?

    How often is the default font size in the browser not 16px?

    How to check if user is in high contrast mode via JavaScript or CSS

    How do I align elements using CSS?

    Google fonts and twitter bootstrap 3: where should I load the fonts, and how to use it in css file?

    How to position two blocks side by side with CSS

    How to absolutely position element against page rather than floated parent?

    How to increase a CSS value by the value of a JS variable?

    How to align elements properly using CSS

    How to vary shade of specific table row id

    How to filter elements on click in js?

    How to fade-in and fade-out background-image with CSS transition?

    How to pause or delay animation using JavaScript/jquery

    CSS - How can I set the content to attr() but when attribute isn't available, set it to 0 or another?

    How to centre a div vertically and horizontallly?

    How do I get responsive images to stay equivalent heights as they scale?

    how to keep my slider horizontally centered?

    How do you make linked text act as if it is normal text?

    mkd2pdf, wkhtmltopdf, how to make PDF for slide

    How to shift element upwards to it's variable height using css

    How to apply css on checkbox when it's getting disabled?

    How to change the size of an image inside a div without changing the div size

    How to create pentagon shape for avatar image?

    How do I make my lightbox not scroll?

    How do I format code neatly in HTML/CSS ? I especially want to use the numerical circle callouts, with Python Docutils if I can

    How to add border in my clip-path: polygon(); CSS style

    How to slide-out a submenu from under the navigation bar using CSS transition?