It's not necessary, but i have tried to select <script> tag in css. But it didn't work. Why ?
<style>
script {
padding:80px;
background-color:red;
}
</style>
This should work. Because it works on other elements. But not on script tag .
<script>alert(1)</script>
And this is the tag i want to select.
You forgot to set display property:
script{
display:block;
padding:80px;
background-color:red;
}<script>console.log(1)</script>
#id {...}You can use display:block to show elements that normally wouldn't.
Browsers simply apply the following rule to hide unnecessary tags
head, title, link, meta, style, script {
display: none;
}
But you can override it just like any other CSS. It even works on elements that are not even on the body, but the head, such as titles, metas, etc
head, title, link[href][rel], meta, style, script {
display: block;
}
And even use some pseudo-elements magic to show attributes of tags such as the rel for your CSS link tag, or the content for your description
title, link[href][rel], meta, style, script {
display: block;
}
link[href][rel]::after {
content: attr(rel) ': ' attr(href);
text-transform: capitalize;
}
meta[charset]::after {
content: 'Charset: ' attr(charset);
}
meta[name][content]::after {
content: attr(name) ': ' attr(content);
text-transform: capitalize;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is the title</title>
<meta name="description" content="This is the Description">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<script>/*This is inside an script tag*/</script>
</body>
</html>And then you can style them as you would any regular html element.
Does this have any practical purpose? Nope, none at all. Maybe (and stretching it quite a bit) displaying the title on a print stylesheet. Other than that, it's just a pointless fun fact.
The answers posted here are sufficient, but for fun I decided to mess around with this. I noticed a few things. This code makes a short JavaScript visible, and executes it.
body {
background-color:#2a4128;
color:white;
font-size:1.05em;
}
script {
display:block;
color:#ef9a9a;
background-color:#321117;
font-weight:normal;
padding:10px;
border:1px solid red;
font-family:"Courier New";
font-size:0.94em;
text-align:left;
}
.script-area {
text-align:center;
width:79%;
margin-left:10%;
margin-right:10%;
}
h2 { color:pink; }<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing</title>
</head>
<body>
<h3>Hello world!</h3>
<p>Let's see how this script works!!!</p>
<div class="script-area">
<pre><script type="text/javascript">
document.write("<p>This script came from a visible element!</p>");
document.getElementsByTagName("h3")[0].innerHTML = "I changed this with <b><i>inline JavaScript!</i></b>";
console.log(1);
</script></pre>
</div>
</body>
</html>Like others have stated, the web browser automatically hides typically invisible elements - not just <script>, but <meta>, <title>, <style>, and so on. This is done with the display:none; CSS directive. Like any CSS rule, this can be overwritten with your own. Just select the script and use display:block;.
The script that is now visible on the page, is executed like it normally is. I've noticed the script is unaware of elements that appear after it, and only aware of the DOM that appears before it. I initially placed the brief script in the <head> tag, but I was unable to make it visible with CSS. This is probably due to some kind of
head { display:none; }
rule in the browser software. But I imagine this can be overruled just like for the <script>.
<script>tags. Those are used for JavaScript.