1

I'm creating a website using ASP.NET and I'd like to use some CSS in a user-defined control that will automatically borrow a certain style from the page it's used in.

For instance, suppose we have two pages (foo.aspx and bar.aspx) that use CSS files which each define a style for outlined sidebars in that page:

foo.css 

.sidebar{
  float: right;
  border-style: solid;
  border-width: thin;
  border-color: red;
}

bar.css 

.sidebar{
  float: right;
  border-style: solid;
  border-width: thin;
  border-color: blue;
}

I'd like to give the control some CSS that will pick up the value of a selector defined in the page it's being used in:

.sidebarcoloredtext {
  color: {value of ".sidebar border-color"};
}

Is this possible without adding .sidebarcoloredtext to foo.css and bar.css and manually setting it to the same color as the outline? I suspect the answer is 'no' in vanilla CSS, but I thought I'd ask anyway and see what add-ons can help with this sort of thing.

By the way, please don't answer this by pointing me to the posts that talk about including one style in another style. This is a similar question, but rather opposite in intent.

Martin
  • 348
  • 1
  • 9
  • If you want your styles to be inherited to another stylesheet. I believe you will need SASS or SCSS for that. But my knowledge of SASS is extremely basic so I would not be able to provide an answer. – HTMLNoob Jan 22 '16 at 20:38
  • Just so I understand, `.sidebarcoloredtext` is text content contained inside of `.sidebar`? Couldn't you set the color in `.sidebar` and let `.sidebarcoloredtext` inherit? – Jesse Kernaghan Jan 22 '16 at 20:41
  • Not necessarily, Jesse. If it was, yes, that would be an easily solution, but I'm using this as a simple example of trying to have a control, which requires specific styles of its own, match the style of the page in which it is used. – Martin Jan 22 '16 at 20:43
  • You didn't even address the question. You answered with the code that my question explicitly stated I was trying to avoid. So no, I will not accept or upvote your answer. – Martin Feb 22 '16 at 17:09

1 Answers1

0

You dont need to do it like that. you may just put a page-dependent class on a high level element on the page:

Markup

<div class="blue-page">
    ...
    <div class="sidebarcoloredtext">
    </div>
    ...
</div>

CSS

.blue-page .sidebarcoloredtext{
    color: blue;
}
Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100
  • This is identical to adding .sidebarcoloredtext to each of the CSS files. – Martin Jan 22 '16 at 20:38
  • Not at all. you would better do it using HTML classes, instead of CSS – Peyman Mohamadpour Jan 22 '16 at 20:41
  • Please explain how putting a .sidebarcoloredtext style in the page is different from putting a .sidebarcoloredtext style in the CSS that the page imports. – Martin Jan 22 '16 at 20:44
  • instead of putting `border-color: red;` in `foo.css` file, put it in ` – Peyman Mohamadpour Jan 22 '16 at 20:48
  • ...which would do the same thing, but then I couldn't reuse foo.css as, say, a common stylesheet for all foo-related pages. – Martin Jan 22 '16 at 20:53
  • Believe me, the only robust solution, is to put a class on a high level element on every page, and use that class, as an additive selector specificity, to declare further styles. – Peyman Mohamadpour Jan 22 '16 at 20:56
  • Manually assigning the color from the page level is trivial, and the point of my question is precisely to avoid having to do that on each page that uses the control. – Martin Jan 22 '16 at 20:58