Mixing
How to pick only specific selector declaration's css
I am basically a PHP developer but I came across a problem that in Joomla component development I have to install my own component independently in any Joomla website which I have done successfully. The problem is that when I run my component on random Joomla website it also picks the css of the parent template which I don't want it to do. For example, I have a bootstrap model in my component with class model and the template has some css applying (for example background-color: white) on the same class model then there shows a white background on the model which is really awkward and doesn't make any sense.
.model{ // I want this to be picked
font-size: 15px;
}
.model{ // I don't want this to be picked
background-color: white;
}
So is this possible to pick only the desired selector's css which is declared multiple times?
php css joomla custom-component
edited Jan 5 at 16:25
mickmackusa
23.2k103457
asked Jan 1 at 13:06
Zain FarooqZain Farooq
1,9942929
add a comment |
I am basically a PHP developer but I came across a problem that in Joomla component development I have to install my own component independently in any Joomla website which I have done successfully. The problem is that when I run my component on random Joomla website it also picks the css of the parent template which I don't want it to do. For example, I have a bootstrap model in my component with class model and the template has some css applying (for example background-color: white) on the same class model then there shows a white background on the model which is really awkward and doesn't make any sense.
.model{ // I want this to be picked
font-size: 15px;
}
.model{ // I don't want this to be picked
background-color: white;
}
So is this possible to pick only the desired selector's css which is declared multiple times?
php css joomla custom-component
edited Jan 5 at 16:25
mickmackusa
23.2k103457
asked Jan 1 at 13:06
Zain FarooqZain Farooq
1,9942929
1
No. You need to override those rules. May be something like.your-component .model { background-color: transparent; }
– Salman A
Jan 1 at 14:04
add a comment |
I am basically a PHP developer but I came across a problem that in Joomla component development I have to install my own component independently in any Joomla website which I have done successfully. The problem is that when I run my component on random Joomla website it also picks the css of the parent template which I don't want it to do. For example, I have a bootstrap model in my component with class model and the template has some css applying (for example background-color: white) on the same class model then there shows a white background on the model which is really awkward and doesn't make any sense.
.model{ // I want this to be picked
font-size: 15px;
}
.model{ // I don't want this to be picked
background-color: white;
}
So is this possible to pick only the desired selector's css which is declared multiple times?
php css joomla custom-component
edited Jan 5 at 16:25
mickmackusa
23.2k103457
asked Jan 1 at 13:06
Zain FarooqZain Farooq
1,9942929
I am basically a PHP developer but I came across a problem that in Joomla component development I have to install my own component independently in any Joomla website which I have done successfully. The problem is that when I run my component on random Joomla website it also picks the css of the parent template which I don't want it to do. For example, I have a bootstrap model in my component with class model and the template has some css applying (for example background-color: white) on the same class model then there shows a white background on the model which is really awkward and doesn't make any sense.
.model{ // I want this to be picked
font-size: 15px;
}
.model{ // I don't want this to be picked
background-color: white;
}
So is this possible to pick only the desired selector's css which is declared multiple times?
php css joomla custom-component
php css joomla custom-component
edited Jan 5 at 16:25
mickmackusa
23.2k103457
asked Jan 1 at 13:06
Zain FarooqZain Farooq
1,9942929
edited Jan 5 at 16:25
mickmackusa
23.2k103457
asked Jan 1 at 13:06
Zain FarooqZain Farooq
1,9942929
edited Jan 5 at 16:25
mickmackusa
23.2k103457
edited Jan 5 at 16:25
mickmackusa
23.2k103457
edited Jan 5 at 16:25
mickmackusa
23.2k103457
23.2k103457
asked Jan 1 at 13:06
Zain FarooqZain Farooq
1,9942929
asked Jan 1 at 13:06
Zain FarooqZain Farooq
1,9942929
asked Jan 1 at 13:06
Zain FarooqZain Farooq
1,9942929
1,9942929
1
No. You need to override those rules. May be something like.your-component .model { background-color: transparent; }
– Salman A
Jan 1 at 14:04
add a comment |
1
No. You need to override those rules. May be something like.your-component .model { background-color: transparent; }
– Salman A
Jan 1 at 14:04
1
1
No. You need to override those rules. May be something like
.your-component .model { background-color: transparent; }– Salman A
Jan 1 at 14:04
No. You need to override those rules. May be something like
.your-component .model { background-color: transparent; }– Salman A
Jan 1 at 14:04
add a comment |
2 Answers
2
active
oldest
votes
If you have developed your own Joomla component and your class names are clashing with other classes, then the simplest / most sensible course of action would be to declare unique class names that avoid collisions.
zain_model should be sufficiently unique forever. Or prefix however you like.
answered Jan 5 at 16:24
mickmackusamickmackusa
23.2k103457
The problem is that I don't know which template my client will install
– Zain Farooq
Jan 6 at 10:21
If you write a sufficiently unique class name and write the css styling for it, then it won't matter.
– mickmackusa
Jan 6 at 11:35
Hmm, but what about standard bootstrap classes?
– Zain Farooq
Jan 6 at 12:03
You want to style only the elements associated with YOUR component. You have complete control of the class declarations in the scripts that you write. If you want bootstrap's default behaviors to work on some elements, leave the original class attribute in place. If you want additional styling, add an additional value (zain_prefixed) to the class declaration. If you don't want specific styling, remove the original class. If you want to negate or override a style, then make a specific declaration to counteract the specific style.
– mickmackusa
Jan 6 at 12:11
add a comment |
In HTML, any element declared within its parent element WILL inherit all of the css attributes of the parent class. So if you would like to remove the white background in that child element, you could
a) declare another css class for the child element that sets the background of the child element to something else (in you case make a “.submodel” class that sets background to transparent or another colour, and also include your font size to what you desire
b)declare an ID “#submodel” and do the declarations described in a)
c) if this child is a generic p (paragraph) or h (header) element, you can specify that section’s class as:
.model p {
-set background to new colour
-set font size
}
In css, element styles are always inherited from parent elements, so when designing styles beets you should keep in mind how specific your classes get as it will reduce flexibility in the long run, just as a side note
More information on css inheritance can be found here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
answered Jan 2 at 4:27
Wais ShahbazWais Shahbaz
143
Hmm, I appreciate your effort but that's not the solution. I have independent CSS of my Joomla component which running perfectly independently but when I use any template it inherits the template's css which creates the problem and every template has a different css (If I switch to different templates). So I can't change the css of my component manually each time
– Zain Farooq
Jan 2 at 4:36
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995681%2fhow-to-pick-only-specific-selector-declarations-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
If you have developed your own Joomla component and your class names are clashing with other classes, then the simplest / most sensible course of action would be to declare unique class names that avoid collisions.
zain_model should be sufficiently unique forever. Or prefix however you like.
answered Jan 5 at 16:24
mickmackusamickmackusa
23.2k103457
The problem is that I don't know which template my client will install
– Zain Farooq
Jan 6 at 10:21
If you write a sufficiently unique class name and write the css styling for it, then it won't matter.
– mickmackusa
Jan 6 at 11:35
Hmm, but what about standard bootstrap classes?
– Zain Farooq
Jan 6 at 12:03
You want to style only the elements associated with YOUR component. You have complete control of the class declarations in the scripts that you write. If you want bootstrap's default behaviors to work on some elements, leave the original class attribute in place. If you want additional styling, add an additional value (zain_prefixed) to the class declaration. If you don't want specific styling, remove the original class. If you want to negate or override a style, then make a specific declaration to counteract the specific style.
– mickmackusa
Jan 6 at 12:11
add a comment |
If you have developed your own Joomla component and your class names are clashing with other classes, then the simplest / most sensible course of action would be to declare unique class names that avoid collisions.
zain_model should be sufficiently unique forever. Or prefix however you like.
answered Jan 5 at 16:24
mickmackusamickmackusa
23.2k103457
The problem is that I don't know which template my client will install
– Zain Farooq
Jan 6 at 10:21
If you write a sufficiently unique class name and write the css styling for it, then it won't matter.
– mickmackusa
Jan 6 at 11:35
Hmm, but what about standard bootstrap classes?
– Zain Farooq
Jan 6 at 12:03
You want to style only the elements associated with YOUR component. You have complete control of the class declarations in the scripts that you write. If you want bootstrap's default behaviors to work on some elements, leave the original class attribute in place. If you want additional styling, add an additional value (zain_prefixed) to the class declaration. If you don't want specific styling, remove the original class. If you want to negate or override a style, then make a specific declaration to counteract the specific style.
– mickmackusa
Jan 6 at 12:11
add a comment |
If you have developed your own Joomla component and your class names are clashing with other classes, then the simplest / most sensible course of action would be to declare unique class names that avoid collisions.
zain_model should be sufficiently unique forever. Or prefix however you like.
answered Jan 5 at 16:24
mickmackusamickmackusa
23.2k103457
If you have developed your own Joomla component and your class names are clashing with other classes, then the simplest / most sensible course of action would be to declare unique class names that avoid collisions.
zain_model should be sufficiently unique forever. Or prefix however you like.
answered Jan 5 at 16:24
mickmackusamickmackusa
23.2k103457
answered Jan 5 at 16:24
mickmackusamickmackusa
23.2k103457
answered Jan 5 at 16:24
mickmackusamickmackusa
23.2k103457
answered Jan 5 at 16:24
mickmackusamickmackusa
23.2k103457
23.2k103457
The problem is that I don't know which template my client will install
– Zain Farooq
Jan 6 at 10:21
If you write a sufficiently unique class name and write the css styling for it, then it won't matter.
– mickmackusa
Jan 6 at 11:35
Hmm, but what about standard bootstrap classes?
– Zain Farooq
Jan 6 at 12:03
You want to style only the elements associated with YOUR component. You have complete control of the class declarations in the scripts that you write. If you want bootstrap's default behaviors to work on some elements, leave the original class attribute in place. If you want additional styling, add an additional value (zain_prefixed) to the class declaration. If you don't want specific styling, remove the original class. If you want to negate or override a style, then make a specific declaration to counteract the specific style.
– mickmackusa
Jan 6 at 12:11
add a comment |
The problem is that I don't know which template my client will install
– Zain Farooq
Jan 6 at 10:21
If you write a sufficiently unique class name and write the css styling for it, then it won't matter.
– mickmackusa
Jan 6 at 11:35
Hmm, but what about standard bootstrap classes?
– Zain Farooq
Jan 6 at 12:03
You want to style only the elements associated with YOUR component. You have complete control of the class declarations in the scripts that you write. If you want bootstrap's default behaviors to work on some elements, leave the original class attribute in place. If you want additional styling, add an additional value (zain_prefixed) to the class declaration. If you don't want specific styling, remove the original class. If you want to negate or override a style, then make a specific declaration to counteract the specific style.
– mickmackusa
Jan 6 at 12:11
The problem is that I don't know which template my client will install
– Zain Farooq
Jan 6 at 10:21
The problem is that I don't know which template my client will install
– Zain Farooq
Jan 6 at 10:21
If you write a sufficiently unique class name and write the css styling for it, then it won't matter.
– mickmackusa
Jan 6 at 11:35
If you write a sufficiently unique class name and write the css styling for it, then it won't matter.
– mickmackusa
Jan 6 at 11:35
Hmm, but what about standard bootstrap classes?
– Zain Farooq
Jan 6 at 12:03
Hmm, but what about standard bootstrap classes?
– Zain Farooq
Jan 6 at 12:03
You want to style only the elements associated with YOUR component. You have complete control of the class declarations in the scripts that you write. If you want bootstrap's default behaviors to work on some elements, leave the original class attribute in place. If you want additional styling, add an additional value (
zain_ prefixed) to the class declaration. If you don't want specific styling, remove the original class. If you want to negate or override a style, then make a specific declaration to counteract the specific style.– mickmackusa
Jan 6 at 12:11
You want to style only the elements associated with YOUR component. You have complete control of the class declarations in the scripts that you write. If you want bootstrap's default behaviors to work on some elements, leave the original class attribute in place. If you want additional styling, add an additional value (
zain_ prefixed) to the class declaration. If you don't want specific styling, remove the original class. If you want to negate or override a style, then make a specific declaration to counteract the specific style.– mickmackusa
Jan 6 at 12:11
add a comment |
In HTML, any element declared within its parent element WILL inherit all of the css attributes of the parent class. So if you would like to remove the white background in that child element, you could
a) declare another css class for the child element that sets the background of the child element to something else (in you case make a “.submodel” class that sets background to transparent or another colour, and also include your font size to what you desire
b)declare an ID “#submodel” and do the declarations described in a)
c) if this child is a generic p (paragraph) or h (header) element, you can specify that section’s class as:
.model p {
-set background to new colour
-set font size
}
In css, element styles are always inherited from parent elements, so when designing styles beets you should keep in mind how specific your classes get as it will reduce flexibility in the long run, just as a side note
More information on css inheritance can be found here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
answered Jan 2 at 4:27
Wais ShahbazWais Shahbaz
143
Hmm, I appreciate your effort but that's not the solution. I have independent CSS of my Joomla component which running perfectly independently but when I use any template it inherits the template's css which creates the problem and every template has a different css (If I switch to different templates). So I can't change the css of my component manually each time
– Zain Farooq
Jan 2 at 4:36
add a comment |
In HTML, any element declared within its parent element WILL inherit all of the css attributes of the parent class. So if you would like to remove the white background in that child element, you could
a) declare another css class for the child element that sets the background of the child element to something else (in you case make a “.submodel” class that sets background to transparent or another colour, and also include your font size to what you desire
b)declare an ID “#submodel” and do the declarations described in a)
c) if this child is a generic p (paragraph) or h (header) element, you can specify that section’s class as:
.model p {
-set background to new colour
-set font size
}
In css, element styles are always inherited from parent elements, so when designing styles beets you should keep in mind how specific your classes get as it will reduce flexibility in the long run, just as a side note
More information on css inheritance can be found here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
answered Jan 2 at 4:27
Wais ShahbazWais Shahbaz
143
Hmm, I appreciate your effort but that's not the solution. I have independent CSS of my Joomla component which running perfectly independently but when I use any template it inherits the template's css which creates the problem and every template has a different css (If I switch to different templates). So I can't change the css of my component manually each time
– Zain Farooq
Jan 2 at 4:36
add a comment |
In HTML, any element declared within its parent element WILL inherit all of the css attributes of the parent class. So if you would like to remove the white background in that child element, you could
a) declare another css class for the child element that sets the background of the child element to something else (in you case make a “.submodel” class that sets background to transparent or another colour, and also include your font size to what you desire
b)declare an ID “#submodel” and do the declarations described in a)
c) if this child is a generic p (paragraph) or h (header) element, you can specify that section’s class as:
.model p {
-set background to new colour
-set font size
}
In css, element styles are always inherited from parent elements, so when designing styles beets you should keep in mind how specific your classes get as it will reduce flexibility in the long run, just as a side note
More information on css inheritance can be found here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
answered Jan 2 at 4:27
Wais ShahbazWais Shahbaz
143
In HTML, any element declared within its parent element WILL inherit all of the css attributes of the parent class. So if you would like to remove the white background in that child element, you could
a) declare another css class for the child element that sets the background of the child element to something else (in you case make a “.submodel” class that sets background to transparent or another colour, and also include your font size to what you desire
b)declare an ID “#submodel” and do the declarations described in a)
c) if this child is a generic p (paragraph) or h (header) element, you can specify that section’s class as:
.model p {
-set background to new colour
-set font size
}
In css, element styles are always inherited from parent elements, so when designing styles beets you should keep in mind how specific your classes get as it will reduce flexibility in the long run, just as a side note
More information on css inheritance can be found here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
answered Jan 2 at 4:27
Wais ShahbazWais Shahbaz
143
answered Jan 2 at 4:27
Wais ShahbazWais Shahbaz
143
answered Jan 2 at 4:27
Wais ShahbazWais Shahbaz
143
answered Jan 2 at 4:27
Wais ShahbazWais Shahbaz
143
143
Hmm, I appreciate your effort but that's not the solution. I have independent CSS of my Joomla component which running perfectly independently but when I use any template it inherits the template's css which creates the problem and every template has a different css (If I switch to different templates). So I can't change the css of my component manually each time
– Zain Farooq
Jan 2 at 4:36
add a comment |
Hmm, I appreciate your effort but that's not the solution. I have independent CSS of my Joomla component which running perfectly independently but when I use any template it inherits the template's css which creates the problem and every template has a different css (If I switch to different templates). So I can't change the css of my component manually each time
– Zain Farooq
Jan 2 at 4:36
Hmm, I appreciate your effort but that's not the solution. I have independent CSS of my Joomla component which running perfectly independently but when I use any template it inherits the template's css which creates the problem and every template has a different css (If I switch to different templates). So I can't change the css of my component manually each time
– Zain Farooq
Jan 2 at 4:36
Hmm, I appreciate your effort but that's not the solution. I have independent CSS of my Joomla component which running perfectly independently but when I use any template it inherits the template's css which creates the problem and every template has a different css (If I switch to different templates). So I can't change the css of my component manually each time
– Zain Farooq
Jan 2 at 4:36
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995681%2fhow-to-pick-only-specific-selector-declarations-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
No. You need to override those rules. May be something like
.your-component .model { background-color: transparent; }– Salman A
Jan 1 at 14:04