user5447339 user5447339 - 1 month ago 4
Javascript Question

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

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 */
}

Answer

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.