select parent div for particular class

Question

html...

<div id="main">
<div class="news"></div>
</div>

How could I assign css for #main id which has .news class with pure css ?

Is there something like #main:only(.news){...}?

Out of curiosity, why don't you just target the main id directly using `#main { /* Some CSS */ }`? — MitulP91, Sep 09 '13 at 03:50
the #main id is different in other page and different in .news page — Bhojendra Rauniyar, Sep 09 '13 at 03:52
@C-Link Well generally it's good practice not to repeat id's. They should only be used once. Why don't you just apply a different id? — MitulP91, Sep 09 '13 at 03:53
not yet possible... http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — muratgu, Sep 09 '13 at 03:54
You know that what you are asking doesn't make sense? You are targeting an ID... so just target the #main... — Thanos, Sep 09 '13 at 04:25
I would target the main but inside #main there is .news > How could I target .... — Bhojendra Rauniyar, Sep 09 '13 at 04:29

score 2 · Answer 1 · answered Sep 09 '13 at 03:56

2

You could keep using the #main id and then apply a class to the same element with it's own styles that could override the default #main styles, something like

<div id="main" class="news">

</div>

Then you could write a css rule like this

#main.news {
 /* your css rules go here */
}

answered Sep 09 '13 at 03:56

jono

1,584
14
16

Sorry I was thinking it's a mistake. The index page generate all #main div with class .news then how could I assign the main for .news #main – Bhojendra Rauniyar Sep 09 '13 at 04:08
Sorry, I don't understand your question? Using my answer above, you could retain all styles of #main on all other pages, then on the news page you could add the .news class to the #main div to allow you to style it differently. – jono Sep 09 '13 at 04:12
all page will have #main and when assign .news in #main then it also will be in all page as I'm using joomla template. – Bhojendra Rauniyar Sep 09 '13 at 04:18

score 1 · Accepted Answer · answered Sep 09 '13 at 04:02

1

I often use a body class to allow me to distinguish a common id from one page to another

<body class="news-page">
  <div id="main">
    <div class="news">

then your css can do thus

.news-page #main {
  background: blue;
{

.another-page #main {
  background: green;
}


.news {
  background: red;
}

answered Sep 09 '13 at 04:02

rolfsf

1,763
3
22
32

Your code would be fine. But as far as I'm using joomla template, do you know joomla that generate body class differently. – Bhojendra Rauniyar Sep 09 '13 at 04:32
I think I should accept your answer and ask new question for replacing body class for joomla. – Bhojendra Rauniyar Sep 09 '13 at 04:51

score 0 · Answer 3 · answered Sep 09 '13 at 03:55

How about something like this? You can target id="main" with #main and class="news" with .news.

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>    
        <style type="text/css"
            #main { color: red; }
            .news { color: blue; }
        </style>
    </head>
    <body>
        <div id="main">
            This is #main
            <div class="news">
                This is .news
            </div>
        </div>
    </body>
</html>

score 0 · Answer 4 · edited Sep 09 '13 at 04:22

0

try a parent child relationship something like

#main > div { 
   color:pink;
}

edited Sep 09 '13 at 04:22

Kara

5,650
15
48
55

answered Sep 09 '13 at 03:57

spicy

1
1

select parent div for particular class

4 Answers4