Find Definition of CSS Class in External Stylesheet

Find definition of CSS class in external stylesheet

If you're using the Chrome inspector (right click page, inspect element), highlight the line and look to the right. It should show the CSS class and any rules that are used, and a link to the CSS file.

Shortcut for finding references of CSS class in Visual Studio?

You can use CTRL+SHIFT+F to bring up the Find and Replace dialog. In there, make sure to verify that the search scope is set to Entire Solution, and try that.

How to change css rules of external stylesheet

You can acheive in following manner

var div = document.getElementById("newDiv");
div.style.position = "absolute"; 
div.style.top = "200px"; 
div.style.left = "200px"; 

likewise you can edit/add more css properties
See if this helps to alter CSS rules : Alter CSS Rules

Get a CSS value from external style sheet with Javascript/jQuery

With jQuery:

// Scoping function just to avoid creating a global(function() {    var $p = $("<p></p>").hide().appendTo("body");    console.log($p.css("color"));    $p.remove();})();

p {color: blue}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Can I use non existing CSS classes?

"CSS class" is a misnomer; class is an attribute (or a property, in terms of scripting) that you assign to HTML elements. In other words, you declare classes in HTML, not CSS, so in your case the "target" class does in fact exist on those specific elements, and your markup is perfectly valid as it is.

This doesn't necessarily mean that you need to have a class declared in the HTML before you can use it in CSS either. See ruakh's comment. Whether or not a selector is valid depends entirely on the selector syntax, and CSS has its own set of rules for handling parsing errors, none of which concern the markup at all. Essentially, this means HTML and CSS are completely independent of each other in the validity aspect.¹

Once you understand that, it becomes clear that there is no side effect of not defining a .target rule in your stylesheet.² When you assign classes to your elements, you can reference those elements by those classes either in a stylesheet, or a script, or both. Neither has a dependency on the other. Instead, they both refer to the markup (or, more precisely, its DOM representation). This principle applies even if you're using JavaScript to apply styles, as you're doing in your jQuery one-liner.

When you write a CSS rule with a class selector, all you're saying is "I want to apply styles to elements that belong to this class." Similarly, when you write a script to retrieve elements by a certain class name, you're saying "I want to do things with elements that belong to this class." Whether or not there are elements that belong to the class in question is a separate issue altogether.

---

¹ _{This is also why a CSS ID selector matches all elements with the given ID regardless of whether the ID appears exactly once, or multiple times (resulting in a non-conforming HTML document).}

² _{The only situation I'm aware of where an empty CSS rule like that is necessary is when some browsers refuse to apply certain other rules properly as the result of a bug; creating an empty rule will cause those other rules to be applied for some reason. See this answer for an example of such a bug. However this is on the CSS side and therefore should have nothing to do with the markup.}

Applying multiple classes in CSS [External Stylesheet]

When you write class1 class2 class3 { styles } you are selecting the class3 element that is a child of class2 that is a child of class1. You are not selecting the element with all those 3 classes.

To select the element <p class="class1 class2 class3"> in CSS you should write .class1.class2.class3 ( no spaces )

.class1.class2.class3 {  color: red; }

<p class="class1 class2 class3">Select me</p>

How do you read CSS rule values with JavaScript?

Adapted from here, building on scunliffe's answer:

function getStyle(className) {
    var cssText = "";
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {        
        if (classes[x].selectorText == className) {
            cssText += classes[x].cssText || classes[x].style.cssText;
        }         
    }
    return cssText;
}

alert(getStyle('.test'));

Read Style properties from external style sheet (from file)

You can load it using the onload handler. This will be called when the stylesheet has completed loading. Continue from inside the handler.

(It's important to define the load handler before adding the link element to head as when added the load process will start).

Example

I extracted attributes to make it more readable, modify as needed -
(Remember to also handle errors, ie. onerror).

$("head").append(  $("<link rel='stylesheet' type='text/css'>")    .attr("href", "http://cdn.sstatic.net/stackoverflow/all.css")    .on("load", cssLoaded));
function cssLoaded(e) {  alert("wee...");    // the sheet has loaded, continue from here};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to style SVG with external CSS?

Your main.css file would only have an effect on the content of the SVG if the SVG file is included inline in the HTML:

https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction

<html>
  <body>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
      <path d="M28.44......."/>
    </g>
  </svg>
</html>

If you want to keep your SVG in files, the CSS needs to be defined inside of the SVG file.

You can do it with a style tag:

http://www.w3.org/TR/SVG/styling.html#StyleElementExample

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="50px" height="50px" viewBox="0 0 50 50">
  <defs>
    <style type="text/css"><![CDATA[
      .socIcon g {
        fill:red;
      }
    ]]></style>
  </defs>
  <g>
    <path d="M28.44......./>
  </g>
</svg>

You could use a tool on the server side to update the style tag depending on the active style. In ruby you could achieve this with Nokogiri. SVG is just XML. So there are probably many XML libraries available that can probably achieve this.

If you're not able to do that, you will have to just have to use them as though they were PNGs; creating a set for each style, and saving their styles inline.

---

Related Topics