Internal CSS not override external CSS (api google)... why? - javascript

I do not understand why internal css does not overwrite the external css created by google ...
This external css need to create the Google search bar (in my case, only serves to create a results page-SERP)
<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"> </script>
<style type="text/css">
.gs-result .gs-title, .gs-result .gs-title * {
}
.gs-result a.gs-visibleUrl, .gs-result .gs-visibleUrl {
color: #008000;
text-decoration: none;
display: none;
}
.gsc-table-result {
font-family: 'PT Sans', Arial,sans-serif;
font-size: 14px;
width: 100%;
}
</style>
<script type="text/javascript">
google.setOnLoadCallback(googlata);
google.load('search', '1');
// other js-code that works ;)
</script>
</head>
why ???
thanks!
EDIT
the result page is created by google cse and is added in my div.. this the code created:
<div id="cse"> //my div
<div class="gsc-control-cse gsc-control-cse-it"> //here there is a google code... i show you only parents beacause the code is too long
<div class="gsc-control-wrapper-cse" dir="ltr" style="visibility: visible;">
</div>
Here there is a part of my code:
http://jsfiddle.net/2rg86vm6/1/
is only a part so doesn't work ;)

The answer to "Why isn't my CSS being applied?" is almost always that some other style definition is overriding it. When this happens, it can be frustrating, but don't despair: There are only 2 things you need to know:
Understand selector strength and CSS specificity.
Know how to use your browser's developer tools.
CSS Specificity and selector strength
The "selector" is the part of your style definition that targets (or "selects") your element. It's the code that comes before the curly braces in your CSS:
.gs-results {
color: #008000;
text-decoration: none;
display: none;
}
The above snippet represents a single CSS rule. The selector for the above rule is .gs-results.
Selector strength is important when you have two rules that match a single element and the styles conflict:
.a { color: blue; }
p { color: red; }
<p class="a">Am I red or am I blue?</p>
In the above example, the text is blue because a class selector has a higher specificity than an element selector. If you wanted to force the text red, you could strengthen your p selector by adding the class to it:
.a { color: blue; }
p.a { color: red; }
<p class="a">Am I red or am I blue?</p>
Now the text will be red because a selector consisting of element and class has a higher specificity than just a class selector. We can make in blue again, by increasing the specificity of the first selector. For example, specifying an ancestor class:
.x .a { color: blue; }
p.a { color: red; }
<div class="x">
<p class="a">Am I red or am I blue?</p>
</div>
Further reading:
CSS Standard: Calculating specificity The algorithm is actually quite simple.
CSS Specificity calculator
Finding conflicting selectors
Understanding specificity is vital, but only helpful if you know the style rule that is overriding your own. Fortunately, every browser comes with excellent developer tools that make discovering applied rules a breeze.
In any browser, right click the element whose styles are not being applied as you expected, and choose "Inspect Element". This will open the developer tools with the DOM inspector open and the clicked element selected. You may have to manually select a parent or child element of the one that is selected. Once you have the correct element selected, look at the rules that are being applied. You should see yours in the list with the style properties in strikethrough:
If your particular element has a lot of style rules applied and you are having trouble finding the CSS property you care about, try the "Computed" tab. Additionally, Chrome let's you filter the styles displayed by entering the property you are interested in where it says "Filter...". IE let's you filter the computed tab.
Now that you have identified what rule is overriding your styles, you can see how you need to strengthen your selector. This should not be a difficult thing. We will get our text back to red by borrowing from the other rule's selector:
.x .a { color: blue; }
.x p.a { color: red; }
<div class="x">
<p class="a">Am I red or am I blue?</p>
</div>
Why not just use !important?
Stephanie Rewis's tweet says it best:
Using !important in your CSS usually means you're narcissistic & selfish or lazy. Respect the devs to come...
It causes maintenance headaches. If this is code you will ever need to maintain, you will hate yourself later for using !important. If other devs need to maintain it, they will hate you.

Use !important on your code, altough I would not encourage you to do that permanently, use it just for testing (better way is to strenghten your selector):
.gs-result a.gs-visibleUrl, .gs-result .gs-visibleUrl {
color: #008000 !important;
text-decoration: none !important;
display: none !important;
}

Related

How to use the pseudo selectors in Inline Css in material UI? [duplicate]

I have a case where I must write inline CSS code, and I want to apply a hover style on an anchor.
How can I use a:hover in inline CSS inside the HTML style attribute?
E.g., you can't reliably use CSS classes in HTML emails.
Short answer: you can't.
Long answer: you shouldn't.
Give it a class name or an id and use stylesheets to apply the style.
:hover is a pseudo-selector and, for CSS, only has meaning within the style sheet. There isn't any inline-style equivalent (as it isn't defining the selection criteria).
Response to the OP's comments:
See Totally Pwn CSS with Javascript for a good script on adding CSS rules dynamically. Also see Change style sheet for some of the theory on the subject.
Also, don't forget, you can add links to external stylesheets if that's an option. For example,
<script type="text/javascript">
var link = document.createElement("link");
link.setAttribute("rel","stylesheet");
link.setAttribute("href","http://wherever.com/yourstylesheet.css");
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
</script>
Caution: the above assumes there is a head section.
You can get the same effect by changing your styles with JavaScript in the onMouseOver and onMouseOut parameters, although it's extremely inefficient if you need to change more than one element:
<a href="abc.html"
onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#00F'" >Text</a>
Also, I can't remember for sure if this works in this context. You may have to switch it with document.getElementById('idForLink').
You could do it at some point in the past. But now (according to the latest revision of the same standard, which is Candidate Recommendation) you can't
.
You can't do exactly what you're describing, since a:hover is part of the selector, not the CSS rules. A stylesheet has two components:
selector {rules}
Inline styles only have rules; the selector is implicit to be the current element.
The selector is an expressive language that describes a set of criteria to match elements in an XML-like document.
However, you can get close, because a style set can technically go almost anywhere:
<html>
<style>
#uniqueid:hover {do:something;}
</style>
<a id="uniqueid">hello</a>
</html>
If you actually require inline code, this is possible to do. I needed it for some hover buttons, and the method is this:
.hover-item {
background-color: #FFF;
}
.hover-item:hover {
background-color: inherit;
}
<a style="background-color: red;">
<div class="hover-item">
Content
</div>
</a
In this case, the inline code: "background-color: red;" is the switch colour on hover. Use the colour you need and then this solution works. I realise this may not be the perfect solution in terms of compatibility, however this works if it is absolutely needed.
While it appears to be impossible to define a hover-rule inline, you can define the value of styles inline using a CSS variable:
:hover {
color: var(--hover-color);
}
<a style="--hover-color: green">
Library
</a>
Consider using an attribute or a class in addition to the selector (e.g., [hover-color]:hover) to allow coexistence with other low specificity hover color changing rules (from, e.g., a CSS reset or some elements using the default style).
Using JavaScript:
a) Adding inline style
document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');
b) or a bit harder method - adding "mouseover"
document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };
Note: multi-word styles (i.e.font-size) in JavaScript are written together:
element.style.fontSize="12px"
This is the best code example:
<a
style="color:blue;text-decoration: underline;background: white;"
href="http://aashwin.com/index.php/education/library/"
onmouseover="this.style.color='#0F0'"
onmouseout="this.style.color='#00F'">
Library
</a>
Moderator Suggestion: Keep your separation of concerns.
HTML
<a
style="color:blue;text-decoration: underline;background: white;"
href="http://aashwin.com/index.php/education/library/"
class="lib-link">
Library
</a>
JS
const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
this.style.color='#0F0'
}
libLink.onmouseout = function () {
this.style.color='#00F'
}
Inline pseudoclass declarations aren't supported in the current iteration of CSS (though, from what I understand, it may come in a future version).
For now, your best bet is probably to just define a style block directly above the link you want to style:
<style type="text/css">
.myLinkClass:hover {text-decoration:underline;}
</style>
Foo!
As pointed out, you cannot set arbitrary inline styles for hover, but you can change the style of the hover cursor in CSS using the following in the appropriate tag:
style="cursor: pointer;"
<style>a:hover { }</style>
Go Home
Hover is a pseudo class, and thus cannot be applied with a style attribute. It is part of the selector.
You can do this. But not in inline styles. You can use onmouseover and onmouseout events:
<div style="background: #333; padding: 10px; cursor: pointer"
onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
Hover on me!
</div>
According to your comments, you're sending a JavaScript file anyway. Do the rollover in JavaScript. jQuery's $.hover() method makes it easy, as does every other JavaScript wrapper. It's not too hard in straight JavaScript either.
There is no way to do this. Your options are to use a JavaScript or a CSS block.
Maybe there is some JavaScript library that will convert a proprietary style attribute to a style block. But then the code will not be standard-compliant.
You can write code in various type.
First I can write this
HTML
<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>
CSS
.one {
text-decoration: none;
}
You can try another way:
HTML
Hello siraj
CSS
.one {
text-decoration: none;
}
.one:hover {
color: blue;
}
.one:active {
color: red;
}
You can also try hover in jQuery:
JavaScript
$(document).ready(function() {
$("p").hover(function() {
$(this).css("background-color", "yellow");
}, function() {
$(this).css("background-color", "pink");
});
});
HTML
<p>Hover the mouse pointer over this paragraph.</p>
In this code you have three functions in jQuery. First you ready a function which is the basic of a function of jQuery. Then secondly, you have a hover function in this function. When you hover a pointer to the text, the color will be changed and then next when you release the pointer to the text, it will be the different color, and this is the third function.
I just figured out a different solution.
My issue: I have an <a> tag around some slides/main content viewer as well as <a> tags in the footer. I want them to go to the same place in IE, so the whole paragraph would be underlined onHover, even though they're not links: the slide as a whole is a link. IE doesn't know the difference. I also have some actual links in my footer that do need the underline and color change onHover. I thought I would have to put styles inline with the footer tags to make the color change, but advice from above suggests that this is impossible.
Solution: I gave the footer links two different classes, and my problem was solved. I was able to have the onHover color change in one class, have the slides onHover have no color change/underline, and still able to have the external HREFS in the footer and the slides at the same time!
It's not exactly inline CSS, but it is inline.
<a href="abc.html" onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#00F'">Text</a>
I agree with shadow. You could use the onmouseover and onmouseout event to change the CSS via JavaScript.
And don't say people need to have JavaScript activated. It's only a style issue, so it doesn't matter if there are some visitors without JavaScript ;)
Although most of Web 2.0 works with JavaScript. See Facebook for example (lots of JavaScript) or Myspace.
So this isn't quite what the user was looking for, but I found this question searching for an answer and came up with something sort of related. I had a bunch of repeating elements that needed a new color/hover for a tab within them. I use handlebars, which is key to my solution, but other templateing languages may also work.
I defined some colors and passed them into the handlebars template for each element. At the top of the template I defined a style tag, and put in my custom class and hover color.
<style type="text/css">
.{{chart.type}}-tab-hover:hover {
background-color: {{chart.chartPrimaryHighlight}} !important;
}
</style>
Then I used the style in the template:
<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
Payouts
</span>
You may not need the !important
While the "you shouldn't" context may apply there may be cases were you still want to achieve this. My use case was to dynamic set a hover color depending on some data value to achieve that with only CSS you can benefit from specificity.
Approach CSS only
CSS
/* Set your parent color for the inherit property */
.sidebar {
color: green;
}
/* Make sure your target element "inherit" parent color on :hover and default */
.list-item a {
color: inherit
}
.list-item a:hover {
color: inherit
}
/* Create a class to allows to get hover color from inline style */
.dynamic-hover-color:not(:hover) {
color: inherit !important;
}
Then your markup will be somewhat like:
Markup
<nav class="sidebar">
<ul>
<li class="list-item">
<a
href="/foo"
class="dynamic-hover-color"
style="color: #{{category.color}};"
>
Category
</a>
</li>
</ul>
</nav>
I'm doing this example using handlebars but the idea is that you take whatever is convenient for your use case to set the inline style (even if it is writing manually the color on hover you want)
You can just use an inline stylesheet statement like this:
<style>#T1:hover{color:red}</style><span id=T1>Your Text Here</span>
You can use the pseudo-class a:hover in external style sheets only. Therefore I recommend using an external style sheet. The code is:
a:hover {color:#FF00FF;} /* Mouse-over link */
You can do id by adding a class, but never inline.
<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>
It is two lines, but you can reuse the class everywhere.
My problem was that I'm building a website which uses a lot of image-icons that have to be swapped by a different image on hover (e.g. blue-ish images turn red-ish on hover).
I produced the following solution for this:
.container div {
width: 100px;
height: 100px;
background-size: 100px 100px;
}
.container:hover .withoutHover {
display: none;
}
.container .withHover {
display: none;
}
.container:hover .withHover {
display: block;
}
<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>
I introduced a container containing the pair of images. The first is visible and the other is hidden (display:none). When hovering the container, the first becomes hidden (display:none) and the second shows up again (display:block).

Are type selectors supposed to be overridden by id selectors [duplicate]

What is the level of CSS specificity received by inherited properties? I read through the W3 recommendation regarding CSS specificity and so I understand how to calculate the different specificities of css rules which are directly targeting the same element, but I see no mention there of the level of specificity given to inherited attributes.
In particular, the issue I'm encountering has to do with header elements, though I would be very interested to understand this in general.
For example, here's a snippet of HTML:
<h2>This should be black</h2>
<div class="all_red_text">
<h2>This should be red</h2>
</div>
Now if I include some CSS like this:
.all_red_text { color: red; }
I will get the result I expect. On the other hand, if I the css which I included was
h2 { color: black; }
.all_red_text { color: red; }
then all the text will be black. In the first case there is some default browser CSS which is able to be overridden by the inherited property, but then when the same property is manually specified in the second example it takes precedence over the inherited property.
Any declaration that matches element directly will get priority over the property that's inherited from the element's parent. Specificity has nothing to do with that.
CSS is applied to elements in this form:
Priority 1: inline styles
Priority 2: CSS ID styles
Priority 3: CSS class/pseudo-class styles
Priority 4: CSS element styles
Priority 5: Inherited styles
So, using your HTML structure & CSS:
h2 { color: black; }
.all_red_text { color: red; }
<h2>This should be black (and is black)</h2>
<div class="all_red_text">
(This text is indeed red.)
<h2>This should be red (actually, its parent is red - this text is black)</h2>
</div>
The .all_red_text CSS is telling the div.all_red_text element and everything inside it to have red text. The h2 CSS is telling the h2 elements directly to have black text. When the h2 is rendered, it sees "my parent element wants me to have red text, but I'm directly being told to have black text". The same idea applies to further up parents, including the HTML and browser defaults - this allows you to, for example, set the font-family on the html element and have it apply to everything on your (well formatted) web page, unless something specifically overrides it.
If you want the h2 inside div.all_ted_text to also have red text, you'd need to tell those h2 elements directly to have red text; something like this:
.all_red_text h2 { color: red; }
CSS-Tricks has a pretty nice guide on this, although they don't currently go too deep into inherited properties.
There is no such thing as specificity of inherited CSS properties. Selectors, not properties, have specificity.
In your example, both h2 elements match only one of the rules, h2 { color: black; }. Thus, the color of h2 is black (assuming there are no other style sheets that affect the rendering). Anything set on some other elements (including the parent of the second h2 element) does not affect this the least.
If the rule h2 { color: black; } is absent and there are no other rules affecting the situation, then there is no color set on either of the h2 elements. According to the definition of the color property, the value is then inherited from the parent.
Two or more selectors gets engaged into Specificity War, if and only if
they end up targetting the exact same element. However, If two selectors (targetting the same element) have equal specificity weight, then there are other factors like you said, inheritance or the styles getting over ridden in the css file.

While Loading my site on the client's web page there occurs css property clash issues

When i load my Website in the client's url, there occurs a error which takes the css property from the client's css and changed in our css which affects my site.
Is there is any way to write all the property and value in my class so that it will not take from the client's css?
In cases where both stylesheets style the same properties but the wrong stylesheet is winning out (e.g. you have p {border: 1px solid green; color: blue} and the client css has p {border: 1px solid red} and the tables are getting a red border):
If possible, tweak your css to avoid the conflict. This may also require tweaking your markup. For example, if your css and the client's css provides styles for a class called .myclass, you could rename yours to .mynewclass.
You may also be able to get around this by increasing the specificity of your styles. For example, if .myclass is styled in the client css, your css could style body .myclass. For more on specificity, see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
There's always !important (e.g. .myclass {border-color: green !important}) which may make your styles win over the client's. Keep in mind that using a lot of !important is generally considered a sign of bad CSS.
In cases where the client stylesheet is styling a property you want left at the default (e.g. you want borderless divs, but the client css specifies p {border: 1px solid red}) you'll have to add an override: p {border: 0;}.
If you can wrap all your markup in an overriding class, you can do something like
/* client's styles */
p {
border: 1px solid blue
}
/* your styles */
.reset p {
border: 0;
}
<p>client (border)</p>
<div class="reset">
<p>you (no border)</p>
</div>
Or maybe everything you add to the site is always inside the same element, like .main. In that case, in the above example you could style .main p.
If using a wrapper won't work, you can always add a reset class to every one of your elements. That will be a hassle, but it'll work:
/* client's styles */
p {
border: 1px solid blue
}
/* your styles */
p.reset {
border: 0;
}
<p>client (border)</p>
<p class="reset">you (no border)</p>
If you do a bunch of work with this client, it could be worth developing a "reset.css" with all your reset rules.
Do you have the style-loader in your css loader? Look into the rendered DOM and compare the position from the client-css and your react-css. I suspect the react css is inserted as a style tag before the client-css link tag.
Use the extract-text-plugin to generate a separat css file, which you can insert into your DOM after the client's css by hand.

The right way to set an internal style or to manipulate the internal <style> sheet with JavaScript/jQuery

Let say I have this external "style.css" sheet:
p.class1 {
background-color: blue;
}
And my HTML content is this:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
p.class1 {
background-color: red;
}
p.class2 {
background-color: green;
}
</style>
</head>
<body>
<p class="class1">This is the first paragraph..</p>
<p class="class2">This is the second paragraph..</p>
</body>
For full source code example, visit this link! When I try this .css() code:
$('p.class1').css("background-color", "green");
It will set the p.class1's background-color inline, like:
<p class="class1" style="background-color: rgb(0, 255, 0);">
When I unset it with .css("background-color", ""), the inline style will be gone and the background will set back to red internally. What I want is to set the internal p.class1 style to "" or to remove it when I unset, so the background will become blue externally.. Is there a right way to manipulate the internal <style>?
Keep note, I don't want to remove the internal <style> element to perform the external p.class1 style if it will also affect the style for p.class2 or any attempt that will affect the style of the other in that element.
It is possible, but you will need to use CSSOM to manipulate the style sheet. This is not a jQuery thing, per se, though jQuery can help in the first stages.
The first step is getting to the internal <style> element in the DOM. The easiest way to do that would be to set an id attribute on it in your HTML and then use document.getElementById() to grab the element on the JavaScript side, but any method that can pick out that individual element will work. Assuming you use an id, the HTML might look like this:
<style id="internalStylesheet">
p.class1 {
background-color: red;
}
p.class2 {
background-color: green;
}
</style>
...and then in the JavaScript side...
var styleElem = document.getElementById('internalStylesheet');
Note that if you use jQuery to do this, you need the actual element, not the jQuery collection returned by jQuery().
Once you have the element, you can get into the CSSOM side through its .styleSheet property. Once you're in the stylesheet, the next step is to find the exact rule you want. CSS rules don't have unique IDs like DOM nodes can, so your only option is to search the list:
var desiredRule = null;
for (var i = 0; i < styleElem.styleSheet.cssRules.length; i += 1) {
if (styleElem.styleSheet.cssRules[i].selectorText === "p.class1") {
desiredRule = styleElem.styleSheet.cssRules[i];
break;
}
}
Keeping a reference to the rule you want is a good idea if you will have to change it many times. That way you won't have to repeat this search process every time you want to change the rule.
Once you have the rule you want, manipulating the rule is a lot like manipulating inline styles. For actually removing properties on the rule, I recommend something like this:
desiredRule.removeProperty("background-color");
Note that because of the inefficiences involved in searching the list, I don't recommend you do this unless the rule will affect many elements on the page, and it might have to be changed often. If that fits your use case, then it can be very fast, especially if you keep cached references to the rules you need to change. But this doesn't actually describe many common use cases, and when it doesn't, it's troublesome enough that it could be called premature optimization.
The only way to have a conflicting external CSS file override the inline <style> element without changing your HTML file at all, based on the code in your question, is by adding the !important hack to your external CSS file:
p.class1 {
background-color: blue !important;
}
But this is a hack, is bad, and should not be done, because you are throwing away the "Cascading" part of CSS when you use !important; instead, you should just remove p.class1 { background-color: red; from your inline <style> element, or replace its value with blue, since you don't want red to be used.
Instead, you should have your external stylesheet load after the <style> element. This can be done by simply flipping their order:
<head>
<style>
p.class1 {
background-color: red;
}
p.class2 {
background-color: green;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
This will override the <style>'s p.class1 value of red with the CSS file's p.class1 value of blue.
Alternatively, if you add a wrapper/container element around your <p> elements, you can set your external CSS file to have a more specific selector, which would override the less specific selector in the <style> element. Something like:
HTML:
<div class="wrapper">
<p class="class1">This is the first paragraph..</p>
<p class="class2">This is the second paragraph..</p>
</div>
CSS:
.wrapper p.class1 {
background-color: blue;
}
Since the selector .wrapper p.class1 is more specific than the inline selector p.class1, it will normally override the inline selector.
Firstly, there is no real difference between the external stylesheet and the internal <style> tag. The one defined later will take effect. I presume you have included your CSS before your <style>, so this part of the CSS will never work:
p.class1 {
background-color: blue;
}
Secondly, all inline styles will overwrite any CSS, so your jQuery .css() calls will always work. Setting it to an empty string will remove that inline style property, so it will naturally fall back to the lower-priority stylesheets - in your case,
<style>
p.class1 {
background-color: red;
}
...
</style>
Thirdly, no there is no way to manipulate the internal <style> dynamically. So if you want your p.class1 to revert to blue after inline styles are removed, you should either:
Declare your <link href="external.css"> after your <style>, which would then cancel out your p.class1 internal style. (This then begs the question of: why would you want to include that property for it to be cancelled out then?)
OR
Just use CSS and avoid internal styles.

Defining custom css styles for html tags

I don't do CSS and I'm not even sure what this is called so excuse the ignorance :-)
.examples {
}
.examples b {
font-weight: bold;
}
.examples p {
margin-top: 0.9em;
margin-bottom: 0.9em;
}
I'm assuming the above means any b or p tags inside a <div class='examples'> will use the styling from .examples and anything custom defined for b or p?
Can I create my own style using that convention, like this?
.examples mystyle {
}
<div class='examples'>
<div class='mystyle'>
...
UPDATE:
I want mystyle to use examples styling, but override with a black bottom border. Using .examples .mystyle the bottom border appears outside examples div, but with .examples mystyle the enclosing div looks good, but the bottom black border is gone. My apologies, so it's not working either way.
http://jsfiddle.net/SAFX/5ft9W/
Since you are using a class on the tag it would need to be a class selector and the element must be a child of .examples:
/* Notice the `.` on mystyle */
.examples .mystyle {
}
<div class="examples">
<div class='mystyle'></div>
</div>
There are several parts to a CSS style:
.examples .mystyle { /* selector */
font-weight: bold; /* This entire line is a declaration consisting of a property & value*/
}
What you seem to be asking about is the terminology to describe child elements inheritance of style from an ancestor; this is the 'cascade' of 'Cascading Style Sheets.' Not all elements inherit from their parents/ancestors (a links, notably, do not inherit the color property by default, though specifying color: inherit; in their css declaration can make them do so).
If you're asking about how to refer to the list of selectors that determine which elements are targeted by a particular rule, that is the 'selector', or 'selector expression.'
References:
CSS (from the Mozilla Developer Network, 'MDN').
Introduction to CSS 2.1 (from the W3C).
Selectors, Level 3 (from the W3C).

Categories