CODEWITHSUNDEEP
htmlcss
user1038814
user1038814

Reputation: 9677

Declaring CSS rules to apply only to a particular class

I have the following CSS I need to apply to only a particular div (because of conflicts):

The div in question has the class name datepicker-days. Do I declare the below table as .datepicker-days.table? But then how do I declare the .table class below that?

CSS

    table {
      max-width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
    }
    .table {
      width: 100%;
      margin-bottom: 18px;
    }
    .table th, .table td {
      padding: 8px;
      line-height: 18px;
      text-align: left;
      border-top: 1px solid #ddd;
    }

HTML

<div class="datepicker-days" style="display: block; ">
      <table class=" table-condensed">
         <thead>
             <tr>
                <th class="prev">
                ....

Sorry if this wasn't clear, the CSS rules are from Bootstrap. I'm just using a few of the rules because the datepicker plugin I am using depends on those particular rules. So where I have other instances of <tables> in my code, I don't want these rules to apply.

Upvotes: 6

Views: 8633

Answers (4)

William Smith
William Smith

Reputation: 852

If you only need to apply a specific style to one unique div, why not give it an id #

Upvotes: 0

Xhynk
Xhynk

Reputation: 13890

.datepicker-days { /* Targets the div */ }

.datepicker-days table { /* targets all tables nested in the div */ }

.datepicker-days > table { /*targets only tables that are direct children on the div */ }

Upvotes: 4

Paul Dessert
Paul Dessert

Reputation: 6389

You would do the following:

.datepicker-days table {
    Styles here;
}

This looks for <table> with the .datepicker-days class only

Upvotes: 2

Dai
Dai

Reputation: 155628

Just use the descendant selector:

.datepicker-days table {
    /* this rule will only apply to `<table>` elements that are descendents of any element with class "datepicker-days" */
}

Upvotes: 8

Related Questions