CODEWITHSUNDEEP
csscss-selectors
Brian Huether
Brian Huether

Reputation: 179

Why is this CSS selector not selecting the targeted element?

I am working on a drupal site which has these rather insanely nested divs. Here is a block on the front page:

<div class="view-content">
    <div class="views-row views-row-1 views-row-odd views-row-first">
        <div class="ds-2col-stacked-fluid node node-lesson node-promoted node-teaser contextual-links-region view-mode-teaser teaser-layout clearfix" typeof="sioc:Item foaf:Document" about="/node/673">
            <div class="contextual-links-wrapper contextual-links-processed">
            <div class="group-header teaser-header">
            <div class="group-left teaser-left">
                <div class="field field-name-field-lessonintro field-type-text field-label-hidden">
                    <div class="field-items">
                        <div class="field-item even">
                            <p>Some text</p>

I want the div containing the text to have specified margins and padding. So based on what I have been reading about selection rules, I thought this would do the trick:

teaser-left.teaser-right p{
    margin:5px;
    padding:4px;
}

I want to select at this level because teaser-left and teaser-right are classes I created specifically for these blocks, and the remainder of the divs/classes are from drupal core and modules. So I don't want to select in a way that references the other classes in the structure because they could change.

That is why I thought above would amount to "select all p elements who are somewhere within a structure where at some point there is teaser-left or teaser-right class."

How would I properly do this?

Thanks

But it has no effect, even if I put !important.

Upvotes: 1

Views: 48

Answers (2)

CodeRomeos
CodeRomeos

Reputation: 2448

You need to put the . to class name!

.teaser-left p, .teaser-right p {
  margin:5px;
  padding:4px;
  border:1px solid red;
}

Check this fiddle.

Upvotes: 2

ankur140290
ankur140290

Reputation: 640

You made a slight mistake. You must add . before every class name to make selection work. Also, the below code will apply margin/padding to P tag which is in following hierarchy : Teaser-left -> teaser-right -> P. 

.teaser-left .teaser-right p{
    margin:5px;
    padding:4px;
}

But if you want all P tag in either left or right teaser to have padding then you need to modify this a little.

.teaser-left p , .teaser-right p{
    margin:5px;
    padding:4px;
}

Upvotes: 4

Related Questions